Aspasia. 470?-410 BCE.

Image effects and simple rollovers

Detecting the click:

type example script comments
a clickable
image		 <img src="i1.jpg" onclick="alert('orange?');"> won't work in Netscape since image doesn't handle click
a clickable image <a href="#" onclick="alert('green?');">
<img src="i2.jpg"></a>		 will work in Netscape since image is nested in link which handles event. Note border around image. May scroll page.
a clickable image <a href="#" onclick="alert('greener?');">
<img src="i3.jpg" border="0"></a>		 will work in both browsers; eliminates border around image; may scroll page.
a clickable image <a href="#" onmousedown="alert('blue?');">
<img src="i4.jpg" border="0"></a>		 ok for both browsers; no border; no scroll.

Events other than clicks:

type example script comments
mouse enters the image <img src="i1.jpg" onmouseover="alert('orange?');"> won't work in Netscape since image doesn't handle event
mouse enters; mouse leaves. <img src= "i4.jpg"onmouseover="src='i3.jpg';"
onmouseout="src='i4.jpg';">		 Won't work in Netscape.
mouse enters; mouse leaves. <a href= "#"onmouseover="h1.src='i3.jpg'"
onmouseout="h1.src='i2.jpg'">
<img src="i2.jpg" name="h1" border="0">
</a>		 a basic rollover from one image to another; should be same in both browsers. Since events are managed outside img tag, image must be named
mouse is depressed; mouse is released. <a name="b" href= "#b"  onmousedown="h2.src='i4.jpg'"
onmouseup="h2.src='i3.jpg'">
<img src="i3.jpg" name="h2" border="0">
</a>		 make sure the image has a different name than above; else see below. Onmouseup triggers scrolling. Local anchor restricts range of scroll.
mouse enters; wrong image is rolled <a href= "#"onmouseover="h2.src='i4.jpg'"
onmouseout="h2.src='i5.jpg'">
<img src="i5.jpg" name="h3" border="0">
</a>		 here's what happens if wrong image name is used. Though mouseover and mouseout are planned for, click causes scrolling.
mouse enters; mouse leaves. <a href="#f" name= "f"onmouseover="h4.src='i5.jpg'"
onmouseout="h4.src='i4.jpg'">
<img src="i4.jpg" name="h4" border="0"></a>		 Attempt is made to reduce scrolling on click.
mouse enters; mouse leaves;no click. <a href="javascript:Z( );"
onmouseover="h5.src= 'i5.jpg';"onmouseout="h5.src='i2.jpg';">
<img src="i2.jpg" name="h5" border="0"></a>		 <script>
function Z(){
}</script>
mouse enters; mouse leaves; no click. <a href= "javascript:R('h6',file);"onmouseover="file='i5.jpg';R('h6',file);"
onmouseout="file='i2.jpg';R('h6',file);">
<img src="i2.jpg" name="h6" border="0"></a>		 <script>
function R(I,S){
document.images[I].src=S;
}</script>
mouse enters; mouse leaves; last cell blurs on mouseup
<a href="javascript:Z( );" onmouseout="h10.src='i4.jpg';" onmouseover="h10.src='i5.jpg';"
onmouseup="blur();">
<IMG  border=0 height= 50 name=h10 src="i4.jpg" width=50></a>		 <script>
function Z(){
}</script>