Display image when mouseover on anchor tag

[sasimca007]

Hello friends,
I know that an image can used as link. But what my doubt is, when mouse moves on a link it should display an image corresponding to that link, and in tha place of link only.

That means, for example we have few cinema directors names on a page, every name is a link, and when i move mouse on that link the photo of that director should display there.

Can any one please help me with code in html or javascript.

[clain]

you can create div's which have the names links ... let id of each links be the same name as the link..

now onMouseover event of div should call a function which passes the div id as parameter.. this function should hide the link in that div and should display the image...

now onMouseout function should call a function which passes the id ...which hides the image and shows the link..

make sure that your image have a link which redirects to actual link page...

use "location.h ref "

enjoy coding..!!!!!

I hope you got it.....!!!

by the way Administrators ..please move this to JavaScript forums.

Thank you

[Dormilich]

whether you have to code in html or javascript depends on your html.

examples (sketches)

// html:
<div class="sioh">
  <a href="…">John Doe</a>
  <img src="jdoe.png" … >
</div>
// css:
.sioh img {
  visibility: hidden;
}
 
.sioh:hover img {
  visibility: visible;
}

// html
<a class="ioh" id="jdoe" href="…">John Doe</a>
// js
var links = getElementsByClassName('ioh'); // function by Robert Nyman
var l = links.length;
for (var i=0, i<l; i++)
{
  addEvent(links[i], "mouseover", showImg); // there are many addEvent() versions around (→ google)
}
function showImg()
{
  // ImgInfoObj holds the attribute values of every image
  // select apropriate infos
  var desc = ImgInfoObj[this.id];
  // create an image node using DOM
  // function to be defined elsewhere
  var img = createImg(desc.src, desc.width, desc.height, desc.alt);
  // insert img to the page
  // use this.firstChild.replaceChild() if you want to replace the text
  this.appendChild(img); 
}

@clain
not if the problem should be solved by CSS...
@clain
that depends on the actual code.

regards