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

image rollover

P: 9
I want to "rollover" an image on a mouseover event, but the image is to be displayed in a different location from the mouse. The image will be in ('ImgBox') and the mouse can be in any cell in a specific column of a table -> giving diff. images.
My code follows, but doesn't work. Any help would be appreciated thanks.

Expand|Select|Wrap|Line Numbers
  1. function ShowImage(artImg) {
  2. //    document.getElementById("ImgBox").src=artImg;
  3. // tried above code and in desperation I tried the following to no avail
  4.     alert (artImg);
  5. }
  7. function HideImage(){    
  8. // using a subdirectory off the main site folder
  9. // tried it without the '/images/ - no effect
  10.     document.getElementById('ImgBox').src="/images/Namitjiras_Glen_Helen.jpg" width="390" height="312";
  11. }
The calling routine is
Expand|Select|Wrap|Line Numbers
  1.                 <td> <a href="#" onmouseover="ShowImage(src='images/MonksCowl.jpg')" onmouseout="HideImage()" > Commended  </a> </td>
Happy new year to all.
Jan 15 '12 #1
Share this Question
Share on Google+
4 Replies

P: 144
I don't think you put "src=" before the image string as part of the function call. Just put the image path/name in the parameter: ShowImage('images/MonksCowl.jpg')
Jan 15 '12 #2

P: 9
Tried that too - did not work. I also tried removing the data from the 'ImgBox' and simply hid it - that worked.
Jan 15 '12 #3

P: 144
If you had data in the cell where the image was, and all you did is remove/hide the data (text?) then the problem you may have had was sharing the space, and "where was the image actually being positioned." The "position" settings or possibly the z-index for the image would allow for both to appear, overlapping instead of displacing. If that's the case, or if overlapping is what you want there are several tricks to play with the combination of text & image.
Jan 15 '12 #4

P: 9
Thanks for the reply.
I have 2 distinct elements. A <Div> called 'ImgBox' where I want the image to rollover, and a table.
I want to be able to mouseover any cell of the 2nd column, which will trigger individual <a href="#" .... </a> links to change the image in the 'ImgBox'
ie. row1, col2 --> Img1
row2, col2 --> Img2 etc.

I only used the alert() because I understood it was similar to a msgbox in VB (I have a lot of programming exp. in VB6), and was hoping it would show me I actually had entered the function - it didn't display anything. I included it to show that I had tried all possibilities I could think of.

Many thanks for your help though.
Jan 15 '12 #5

Post your reply

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