Looking for Specific Code

[Aurora]

I'm not sure if I've ever seen this code on the web before, but it seems simple enough so I'm wondering if someone could show me how to do it.

Basically, I'm going to have a list of links on my page.
When a user hovers over each link, I want a picture to appear (only on the hover) next to the links.

I'm not completely sure if this should be under css, so if it isn't, a push in the right direction (or right forum) would be appreciated!

Thanks much!

PS. I've attached an example of what I'm saying. (the box on the right would have the picture appear on hover)

[rangana]

See if this reply from the previous thread helps:
http://dynamicdrive.com/forums/showpost.php?p=143627&postcount=2

[Aurora]

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

This one is related to what I'm looking for.
I like what this one does. Is there a way to have the images appear on the right on HOVER with the links instead of when you click them? I want the links to work as regular links and lead to another page.

[rangana]

Modify the highlighted with mouseover:


<a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage::click" rev="loadarea2">Thumbnail Example 3 (click)</a><br />
<a href="http://www.nasa.gov/images/content/168291main_image_feature_750_ys_4.jpg" rel="enlargeimage::click" rev="loadarea2">Thumbnail Example 4 (click)</a><br /><br />

[Medyman]

It's also possible to do this entirely with CSS -- something I prefer to JavaScript whenever possible because of the need to have alternates for JS-disabled browsers.

Here is what I mean: Horizontal (http://www.visualbinary.net/files/tutorials/css-gallery/horizontal/)& Vertical (http://www.visualbinary.net/files/tutorials/css-gallery/vertical/)

caveat: won't work as intended in IE6.

[Aurora]

It's also possible to do this entirely with CSS -- something I prefer to JavaScript whenever possible because of the need to have alternates for JS-disabled browsers.

Here is what I mean: Horizontal (http://www.visualbinary.net/files/tutorials/css-gallery/horizontal/)& Vertical (http://www.visualbinary.net/files/tutorials/css-gallery/vertical/)

caveat: won't work as intended in IE6.

I don't know if it's just the computer I'm on, but the hovers weren't working properly? The first time I hovered a link it would show up, but the next time, nothing loaded =P

[Medyman]

I don't know if it's just the computer I'm on, but the hovers weren't working properly? The first time I hovered a link it would show up, but the next time, nothing loaded =P


caveat: won't work as intended in IE6.

It's the price of using non-modern browsers :p. Switch to IE7, at the very least.

[Aurora]

Good call.
You were right, I was on a school computer, which IS an older version of IE.

At home it works fine. =)
How do I get the code for this script?

[Medyman]

Good call.
You were right, I was on a school computer, which IS an older version of IE.

At home it works fine. =)
How do I get the code for this script?

In IE? View > Source
In Fx? View > Page Source

[chechu]

Or this:

<ilayer width=98% height=20 name="dep1">
<layer name="dep2" width=98% height=20>
</layer>
</ilayer>
<div id="describe" style="background:'green.gif';width:130px;height:20px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>
<script language="JavaScript1.2">
var submenu=new Array()
submenu[0]='kunstlinks'
submenu[1]='artistieke data'
submenu[2]='gastenboek'
submenu[3]='partners'
submenu[4]='exposities'
submenu[5]='advertising'
var delay_hide=10
var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""
function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}
function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}
function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
</script>
<a href="links.html" onMouseover="showit(0)" target="content"><img src="Blinks.gif" height="25" width="50" style="border:1 solid #000000" ></a>
<a href="currartNL.html" onMouseover="showit(1)" target="content"><img src="SCA29.gif" height="25" width="50" style="border:1 solid #000000" ></a>
<a href="guestbook.html" onMouseover="showit(2)" target="_blank"><img src="Bbekijken.gif" height="25" width="50" style="border:1 solid #000000" ></a>
<a href="partner.html" onMouseover="showit(3)" target="content"><img src="SPplenso.gif" height="25" width="50" style="border:1 solid #000000" ></a>
<a href="expoNL.html" onMouseover="showit(4)" target="content"><img src="Bexpo.gif" height="25" width="50" style="border:1 solid #000000" ></a>
<a href="sponsorNL.html" onMouseover="showit(5)" target="content"><img src="Bnieuws.gif" height="25" width="50" style="border:1 solid #000000"></a>

Where you change this:

submenu[0]='<img src="">'