Results 1 to 2 of 2

Thread: HELP to display 2nd image on mouse hover

  1. #1
    Join Date
    Feb 2007
    Thanked 0 Times in 0 Posts

    Default HELP to display 2nd image on mouse hover

    Hi. I am brand new to website development. I know basic HTML and VERY basic CSS for font styling. What I need to do is create a group of images, which, when moused-over, will do 2 things at once: The image will light up, and at the same time a 2nd image will appear in a different location on the screen.

    I have successfully done the "light-up" effect using Javascript (I think), pre-loading the lit-up images, and using a mouseover swap such as the one below:
    <td height="56" width="56"><a href="/Products/IBeam.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Ibeam','','/images/Products/Ibeam-lite.gif',1)"><img name="Ibeam" border="0" src="/images/Products/Ibeam-dark.gif" width="51" height="50"></a></td>

    How can I also make a 2nd (completely different) image appear in another column of the table? Is there a simple CSS I can add to do this? I have about 25 images on the screen, so a different picture will need to display, depending on which image the user is pointing to.

  2. #2
    Join Date
    Dec 2005
    Thanked 0 Times in 0 Posts

    Default mouse hover and 2nd image

    I would have thought you could perhaps achive the same effect with CSS rather than Javascript for the first part of your webproject you mentioned. You could try coding it as a hover function and a filter (for example) a:hover {text-decoration: none; filter: xray; } , but then again I'm not sure it would work on all browsers. As for your 2nd part, that of making another image apear elseware. I guess that too could be done in CSS using the "hide" function placed within a "div". That way you could pre position the div then make it apear only when the 1st object is hovered over with the mouse.

    PS: These are just a few thoughts and not a direct answer to your question.




Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts