Simple onmouseover/onmouseout event

by Aronya 5 replies
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!
#website design #event #onmouseover or onmouseout #simple
Avatar of Unregistered
  • 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 }}
Avatar of Unregistered

Trending Topics

  • 104 {{ upvoteCount | shortNum }}

    Warriors .... Warriors.... what would you like to LEARN?

    Good Morning awesome Warriors... I'm happy to announce that The Warrior Forum is planning to create our first COURSE. Yes... Powered by Warrior Wisdom... yeah!! Made at home. But before ... [read more]

  • 19 {{ upvoteCount | shortNum }}

    1 Billion Dollar - Really ???

    SEOptimization@1 in Off Topic

    Hey Warriors: Lets' assume you have "1 Billion Dollar" in your bank account. What would you do with this money ? Curious to know your views Cheers, Steve

  • 88 {{ upvoteCount | shortNum }}

    How I Sold 985 Copies of an Affiliate Offer in 5 Days (Step by Step)

    When I first started online in 2002, it took me a year to sell 985 copies of anything. These days, I can typically do it in the span of a ... [read more]

  • 48 {{ upvoteCount | shortNum }}

    1 Powerful Concept that Grows Your Business

    Connect with people interested in what you have to offer. Mindfully. Versus desperately running from prospect to prospect, or from number to number. This idea sounds simple, and like common ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    [Help] WP Review Pro from My Theme Shop

    Michael Maegner in Web Design

    Hi guys, I am using WP review pro for my product launch page and I have the problem regarding the rating system of this plugin. The star rating does not ... [read more]