8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Simple onmouseover/onmouseout event

by Aronya
5 replies
  • WEB DESIGN
    • |
I am putting together a simple image gallery page. I found some javascript that loads a preview image in the center of the page when the page is loaded. Then, when a thumbnail image is hovered over, the preview image changes to a larger version of the thumbnail. What does NOT happen is for that initial image to return when the cursor is no longer hovering over a thumbnail. The only way I can make it return is to reload the page. I'm thinking that an equivalent onmouseout code should do the trick, but I'll be darned if I can find a way to make it work.

Here is the base code:


<body>
<div class="gallery" align="center">
<h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://blahblahblah" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://blahblahblah" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://blahblahblah" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://blahblahblah" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://blahblahblah" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://blahblahblah" alt="Image Not Loaded"/>
</div><br/>
<div class="preview" align="center">
<img id="preview" src="http://blahblahblah" alt="No Image Loaded"/>
</div>
<br/>
</div>
</body>

I can post the CSS for the page, but it's really just simple styling; borders, colors, etc.

I have tried using a <span> on the title text, and using the same onmouseover code to point to one of the other 6 images, and that works (I could live with this as an option), but it's not loading the original image. I think it WOULD work if I could ID the original in the same manner as the other images, but I can't find a way to make that work properly.

There is no <script> tag in the head, if that matters, but it doesn't seem to affect the functionality of the page.

I'm also open to using CSS if there is a simple solution in that area.

Wordpress is out. Please don't suggest it. Thanks.

Any ideas? Thanks in advance!
#event #onmouseover or onmouseout #simple
  • Profile picture of the author andrejvasso
    hey aron,

    Did you try to add a simple onmouseout event to the images? Like this:

    <img onmouseover="preview.src=img1.src" onmouseout="preview.src=http://blahblahblah" id="img1" src="http://blahblahblah" alt="Image Not Loaded"/>
    {{ DiscussionBoard.errors[3903001].message }}
  • Profile picture of the author Aronya
    Hi andre,
    Yes. But it doesn't work. Seems that the initial image needs to be ID'd somehow. If I try to do that with something like id="img1", nothing works on the page.

    Thanks anyway
    {{ DiscussionBoard.errors[3903114].message }}
  • Profile picture of the author andrejvasso
    Hei Aron,

    You are lucky that I dont have anything to do tonight, so i have tested your code on my local server and came across several problems.

    I have now ripped your code and removed EVERYTHING that is not needed to make the mouseover/outs work.

    IF you need the image IDs etc for another reason, than you have to add them again.

    Code:
    <img onmouseover="document.preview.src='img1.jpg'" onmouseout ="document.preview.src='preview.jpg'" src="img1.jpg" />
<img onmouseover="document.preview.src='img2.jpg'" onmouseout ="document.preview.src='preview.jpg'" src="img2.jpg" />
<img onmouseover="document.preview.src='img3.jpg'" onmouseout ="document.preview.src='preview.jpg'" src="img3.jpg" />
<br/>
<img name="preview" src="preview.jpg" />
    I have uploaded it to a online code tester so you can check it out in action (however i had to move the images to a webhosting of mine so dont copy the code from there):

    http://jsfiddle.net/ZgzHD/
    {{ DiscussionBoard.errors[3903245].message }}
  • Profile picture of the author Aronya
    You rock! Many thanks. I would have sworn I tried this before, but obviously not. Thanks again.
    {{ DiscussionBoard.errors[3903410].message }}
    • Profile picture of the author andrejvasso
      Originally Posted by Aronya View Post

      You rock! Many thanks. I would have sworn I tried this before, but obviously not. Thanks again.
      Yeah, you were very close to the solution. I think afterall you have just had a few ".src" too much and there was a little confusion between ID and NAME tags.

      Glad I was able to help. if there is anything else, let us know! I am going to bed now, but I am sure others are just waiting to take my place and help
      {{ DiscussionBoard.errors[3903452].message }}

Trending Topics