CODEWITHSUNDEEP
javascripthtml
JohnnyD65
JohnnyD65

Reputation: 23

display a different, larger photo on mouseover

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 completely 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/sheriffcarcompare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></a></p></div>

Upvotes: 1

Views: 11595

Answers (3)

MarsOne
MarsOne

Reputation: 2186

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/sheriffcarcompare.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

Upvotes: 5

Gadde
Gadde

Reputation: 1471

See this Fiddle

Html
 <a href="#">
  <img class="actul" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
  alt="picSmall" />
 <img class="another" src="http://t3.gstatic.com/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; }

Upvotes: 2

David
David

Reputation: 34543

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/sheriffcarcompare.jpg" 
      width="1100" height="350"
      alt="Photoshop Enhancement" />
</a>

Upvotes: 5

Related Questions