javascript - display a different, larger photo on mouseover - Stack Overflow

admin管理员组

文章数量:1343376

Usually i'm here for help with a JavaScript class that I just started, but this on is for a personal project that I'm working on. I have code (see below) that will increase the size of a photo on mouse-over, and it works fine.

Problem is, I want to not only display a larger image but for one of these I'd like to also display a different image pletely on mouse-over (and yes, still at a larger size too!).

This is what I've been working with but can't seem to get it to work correctly (the first image is a "before", and the second is an after Photoshop enhancement with both before/after side by side). Any help is greatly appreciated. Thanks...

<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarpare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></a></p></div>

Usually i'm here for help with a JavaScript class that I just started, but this on is for a personal project that I'm working on. I have code (see below) that will increase the size of a photo on mouse-over, and it works fine.

Problem is, I want to not only display a larger image but for one of these I'd like to also display a different image pletely on mouse-over (and yes, still at a larger size too!).

This is what I've been working with but can't seem to get it to work correctly (the first image is a "before", and the second is an after Photoshop enhancement with both before/after side by side). Any help is greatly appreciated. Thanks...

<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarpare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></a></p></div>

• javascript
• html

Share Improve this question Follow asked Nov 14, 2013 at 5:53 JohnnyD65JohnnyD65 2311 gold badge11 silver badge88 bronze badges 2

• You seem to be closing a double quote after the name of the image, instead of a semi-colon. – Fareesh Vijayarangam Commented Nov 14, 2013 at 5:56
• Thank you, Fareesh. Got it to work with everyones help... – JohnnyD65 Commented Nov 14, 2013 at 6:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Maybe something like this?

<div>
    <p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg" 
    width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src='Images/sheriffcarpare.jpg';this.width=1100;this.height=350;" onmouseout="this.width=250;this.height=150"/></a>
    </p>
</div>

WORKING DEMO

In the Demo wait for a secong over you hover over the image for the image src to change. This happens only because the src is a 3rd party website. It will work perfectly in your case

You can do this without using javascript at all... The :hover CSS selector is similar to the onmouseover javascript event.

<style>
   a img.Large { display: none; }

   a:hover img.Small { display: none }
   a:hover img.Large { display: block; }
</style>

<a href="your link">
   <img class="Small" src="Images/sheriffcarB4.jpg" 
      width="250" height="150"
      alt="Photoshop Enhancement" />

   <img class="Large" src="Images/sheriffcarpare.jpg" 
      width="1100" height="350"
      alt="Photoshop Enhancement" />
</a>

See this Fiddle

Html
 <a href="#">
  <img class="actul" src="http://t2.gstatic./images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
  alt="picSmall" />
 <img class="another" src="http://t3.gstatic./images?q=tbn:ANd9GcT7cjWFiYeCohI7xgGzgW60EHd-kEJyG3eNEdJJhnhp7RFT6o6m" width="600" height="350"
  alt="picLarge" />
</a>

Css

a img.another { display: none; }

   a:hover img.actul { display: none }
   a:hover img.another { display: block; }

本文标签： javascriptdisplay a differentlarger photo on mouseoverStack Overflow