By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,256 Members | 1,700 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,256 IT Pros & Developers. It's quick & easy.

Display image when mouseover on anchor tag

P: 129
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.
Dec 16 '08 #1
Share this Question
Share on Google+
2 Replies

P: 79
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.href "

enjoy coding..!!!!!

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

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

Thank you
Dec 16 '08 #2

Expert Mod 5K+
P: 8,639
whether you have to code in html or javascript depends on your html.

examples (sketches)
Expand|Select|Wrap|Line Numbers
  1. // html:
  2. <div class="sioh">
  3.   <a href="…">John Doe</a>
  4.   <img src="jdoe.png" … >
  5. </div>
  6. // css:
  7. .sioh img {
  8.   visibility: hidden;
  9. }
  11. .sioh:hover img {
  12.   visibility: visible;
  13. }
Expand|Select|Wrap|Line Numbers
  1. // html
  2. <a class="ioh" id="jdoe" href="…">John Doe</a>
  3. // js
  4. var links = getElementsByClassName('ioh'); // function by Robert Nyman
  5. var l = links.length;
  6. for (var i=0, i<l; i++)
  7. {
  8.   addEvent(links[i], "mouseover", showImg); // there are many addEvent() versions around (→ google)
  9. }
  10. function showImg()
  11. {
  12.   // ImgInfoObj holds the attribute values of every image
  13.   // select apropriate infos
  14.   var desc = ImgInfoObj[];
  15.   // create an image node using DOM
  16.   // function to be defined elsewhere
  17.   var img = createImg(desc.src, desc.width, desc.height, desc.alt);
  18.   // insert img to the page
  19.   // use this.firstChild.replaceChild() if you want to replace the text
  20.   this.appendChild(img); 
  21. }
not if the problem should be solved by CSS...
that depends on the actual code.

Dec 16 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.