image rollover

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Phil Frankel
    New Member
    • Jan 2012
    • 9

    image rollover

    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.

    Code:
    function ShowImage(artImg) {
    //    document.getElementById("ImgBox").src=artImg;
    // tried above code and in desperation I tried the following to no avail
    	alert (artImg);
    }
    
    function HideImage(){    
    // using a subdirectory off the main site folder
    // tried it without the '/images/ - no effect
        document.getElementById('ImgBox').src="/images/Namitjiras_Glen_Helen.jpg" width="390" height="312";
    }
    The calling routine is
    Code:
                    <td> <a href="#" onmouseover="ShowImage(src='images/MonksCowl.jpg')" onmouseout="HideImage()" > Commended  </a> </td>
    Happy new year to all.
    cheers
    Phil
    Last edited by Dormilich; Jan 15 '12, 11:10 AM. Reason: please use [CODE] [/CODE] tags when posting code
  • C CSR
    New Member
    • Jan 2012
    • 144

    #2
    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('imag es/MonksCowl.jpg')

    Comment

    • Phil Frankel
      New Member
      • Jan 2012
      • 9

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

      Comment

      • C CSR
        New Member
        • Jan 2012
        • 144

        #4
        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.

        Comment

        • Phil Frankel
          New Member
          • Jan 2012
          • 9

          #5
          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.

          Comment

          Working...