Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

resizing image on hover

Status
Not open for further replies.
richcleverley

richcleverley

MIS
Jul 28, 2005
358
FR
Hi,

Is there anyway to resize an image when the mouse hovers over it. I know I could do it by having two versions of the image and swapping them, but I would like to do it using one file.

Thanks,
Richard
 
Sort by date Sort by votes
Yes - you can set the width and/or height:

Code: 
<img src="whatever.gif" width="100" height="100" onmouseover="this.width = '150'; this.height = '200';">

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks Dan,

I wanted to do it in css and thought I'd got it but IE isn't happy. FF works fine though

Here's my code

html:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div align="center"><span class="class1"><a href="#" ><img src="/image1.jpg" width="133" height="100" border="0"></a></span></div>
</body>
</html>

and the css:

Code: 
.class1 img  {border: 2px solid #336633; width:160px; height:140px; float:middle;}
 .class1 A:visited  img {border: 2px solid #336633;}
 .class1 A:active  img  {border: 2px solid #669966;}
 .class1 A:hover  img {border: 2px solid #990033; width:180px; height:160px; float:middle;} 
[/code}
 
Upvote 0 Downvote
IE won't work properly with the :hover pseudo class on any element other than an anchor, and not affecting any element other than that anchor.

Which means you're better off using JS for this one.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
You could change the className - that would allow you to style using CSS:

Code: 
<img src="whatever.gif" width="100" height="100" class="normalImage" onmouseover="this.className = 'hoveredImage';" onmouseout="this.className = 'normalImage';">

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks Dan,

I had the horrible feeling that that would be the case.

Never mind though, it's for a friend and I guess he will have to use javascript for it then.

Richard

 
Upvote 0 Downvote
Ahh, got it to work,

It seems that you need a hover declaration ther without the img bit too.

Here's the css:

Code: 
.class1 img  {border: 2px solid #336633; width:160px; height:140px; float:middle;}
 .class1 A:visited  img {border: 2px solid #336633;}
 .class1 A:active  img  {border: 2px solid #669966;}
  .class1 A:hover  {border: 2px solid #336633; width:160px; height:140px; float:middle;}
 .class1 A:hover  img {border: 2px solid #990033; width:180px; height:160px; float:middle;}

Richard
 
Upvote 0 Downvote
The border on the first hover will add extra space etc. on FF, so the css should be

Code: 
.class1 img  {border: 2px solid #336633; width:160px; height:140px; float:middle;}
.class1 A:visited  img {border: 2px solid #336633;}
.class1 A:active  img  {border: 2px solid #669966;}
.class1 A:hover  { width:180px; height:160px; float:middle;}
.class1 A:hover  img {border: 2px solid #990033; width:180px; height:160px; float:middle;}

Richard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
729
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
792
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
206
lmcate
lmcate
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
230
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top