www.webdeveloper.com
Results 1 to 6 of 6

Thread: mouseover

  1. #1
    Join Date
    Jun 2008
    Posts
    61

    mouseover

    ok so im in a bit of a predicament. I need to create a mouseover image so when i hover my mouse over an image another image appears somewhere else on the webpage I do not want it to appear above the image hovered over like most code allows, i need a separate image to appear that is normally hidden. possibly the wrong section to post this but help would be much appreciated!

  2. #2
    Join Date
    Aug 2008
    Location
    Phoenix, AZ
    Posts
    84
    Seems like the right place to put this kind of question to me.

    Here's what I would do:
    you have 2 image elements
    HTML Code:
    <img name="img1" id="img1" src="images/image1.jpg" />
    <img name="img2" id="img2" src="images/image2.jpg" />
    You would need to add a listener for when you hover over Image1, and then when you hover off of it. We also need to hide Image2 when the page loads. So now your code will look like this:
    HTML Code:
    <img name="img1" id="img1" src="images/image1.jpg" onMouseOver="showImg();" onMouseOut="hideImg();" />
    <img name="img2" id="img2" src="images/image2.jpg" style="display:none;" />
    Now we can make our javascript functions, which is pretty easy to do since we are just going to change the style of Image2. Here's what it would look like:
    Code:
    <script type="text/javascript">
    function showImg() {
       document.getElementById("img2").style.display="block";
    }
    
    function hideImg() {
       document.getElementById("img2").style.display="none";
    }
    </script>
    Now test it out, see if that is what you are trying to do or if there is something else that you are looking for. I hope that this helps.
    Keep your nose to the grindstone, it sharpens your boogers.

  3. #3
    Join Date
    Jun 2008
    Posts
    61
    ok so it might help if i tell you what its for and maybe u can help me more. I need to make a navigation menu that expands when i hover over some of the options. I want the expanded links to be my own images and the navigation menu is also an image with hyperlinks over it. Is there anyway so I can do this code that when i hover over an option on the menu it expands (honestly thats the only way i could see of doing it at the time)

  4. #4
    Join Date
    Aug 2008
    Location
    Phoenix, AZ
    Posts
    84
    Do you have a website that already does this that you can use as an example?
    Keep your nose to the grindstone, it sharpens your boogers.

  5. #5
    Join Date
    Jun 2008
    Posts
    61
    no sorry, have to create one for part of my exams (outside help is allowed for code). so basically i want the same navigation style as this site but using my own images

  6. #6
    Join Date
    Mar 2011
    Posts
    1
    Quote Originally Posted by beau kang View Post
    Seems like the right place to put this kind of question to me.

    Here's what I would do:
    you have 2 image elements
    HTML Code:
    <img name="img1" id="img1" src="images/image1.jpg" />
    <img name="img2" id="img2" src="images/image2.jpg" />
    You would need to add a listener for when you hover over Image1, and then when you hover off of it. We also need to hide Image2 when the page loads. So now your code will look like this:
    HTML Code:
    <img name="img1" id="img1" src="images/image1.jpg" onMouseOver="showImg();" onMouseOut="hideImg();" />
    <img name="img2" id="img2" src="images/image2.jpg" style="display:none;" />
    Now we can make our javascript functions, which is pretty easy to do since we are just going to change the style of Image2. Here's what it would look like:
    Code:
    <script type="text/javascript">
    function showImg() {
       document.getElementById("img2").style.display="block";
    }
    
    function hideImg() {
       document.getElementById("img2").style.display="none";
    }
    </script>
    Now test it out, see if that is what you are trying to do or if there is something else that you are looking for. I hope that this helps.

    that was exactly what i was looking for! thank you very much.
    but i do have another problem using this, I wanted to apply this multiple times one 1 page, but it doesn't seem to work. when i use it, 1 of the 4 "img2" 's appears when hovering above every "img1"

    i hope you understand what i mean, can you solve this? i think by adjusting a little bit to the script orso. thanks in advance!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles