473,322 Members | 1,408 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Can I make an image rollover that enlarges the image?

mariko
23
I have some pictures on a web page and I want them to "get bigger" when the mouse hovers over them. With the little research I've done, it seems like it would be a rollover effect and something I can do with CSS. I don't want to use javascript. The coding seems to need an image that is divided into the number of needed effects. But that would be problematic because I want images of different sizes and the source image couldn't be split into the necessary sizes using just the depth or just the width of the image. Is there a way for me to have an enlarged image appear as a hover effect?
Jul 5 '10 #1
5 2315
Dormilich
8,658 Expert Mod 8TB
I’d try setting the width and height of the image by CSS.

if that doesn’t work, the only thing in mind is using background images and changing width/height/background-image on :hover.
Jul 6 '10 #2
Not sure if this will help, but by using the hover you can use a larger version of the same image, or any image you want to replace the first one with.

Expand|Select|Wrap|Line Numbers
  1. <td bgcolor="#000000"></p>
  2.     <style type="text/css" >
  3. .rollover a {        display : block;
  4.                      width : 800px;
  5.                      height : 124px;
  6.                      background-image:url(http://www.eurovisionimports.com/stockimage1.jpg); }
  7.  
  8. .rollover a:hover {   display : block;
  9.                       width : 800px;
  10.                       height : 429.86px;
  11.                       background-image:url(http://www.eurovisionimports.com/har...rollover.gif); }
  12. </style>
  13. <div class="rollover" > <a href="http://www.eurovisionimports.com/item1.html"></a> </div>
  14. <br />  
  15. </style>
  16. <style type="text/css" >
  17. .rollover b {        display : block;
  18.                      width : 800px;
  19.                      height : 124px;
  20.                      background-image:
  21. url(http://www.eurovisionimports.com/stockimage2.jpg); }
  22.  
  23. .rollover b:hover {   display : block;
  24.                       width : 800px;
  25.                       height : 441px;
  26.                       background-image:url(http://www.eurovisionimports.com/stockimage2roll.gif); }
  27. </style>
  28. <div class="rollover" > <a href="http://www.eurovisionimports.com/item2.html"></a> </div>
  29.  
  30. </style>
Jul 3 '12 #3
ariful alam
185 100+
You said, you have several images on your webpage. And you don't like to use JavaScript. Then, you have to write hover settings for each image (if every image has individual hover image).

I think this is not useful to you. but if you use JavaScript, you can send parameter to one JavaScript function by hover on image to show individuals big hover image.
Jul 5 '12 #4
ddyer
8
make both images the same size, but make the "smaller" image transparent on it's edges.
Jul 6 '12 #5
ariful alam
185 100+
The following code works on Google Chrome 20.0, Safari 5.1.2:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <title>Image Rollover</title>
  4.     <style type="text/css">
  5.         body:hover { background: url("wlbigielogo.gif") no-repeat center center; }
  6.         h1:hover   { color: red; }
  7.         img        { vertical-align: middle; }
  8.         /*.zoom img  { zoom: 0.5; }*/
  9.         img:hover  { zoom: 2.0; cursor: hand; }
  10.         img.spacer { width: 0px; height: 30px; }
  11.     </style>
  12. </head>
  13.  
  14. <body>
  15.  
  16.     <img id='im1' class='im' src='01.jpg' style='width:220px; height:150px;'>
  17.     <img id='im2' class='im' src='02.jpg' style='width:220px; height:150px;'>
  18.     <img id='im3' class='im' src='03.jpg' style='width:220px; height:150px;'>
  19.     <img id='im4' class='im' src='04.jpg' style='width:220px; height:150px;'>
  20.  
  21. </body>
  22.  
  23. </html>
  24.  
The following Code works on Opera 11.61, Mozilla Firefox 10.0.2

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4.     <title>Image Rollover</title>
  5.  
  6.     <style type='text/css'>
  7.         img:hover{
  8.             position:absolute;
  9.             top:150px;
  10.             left:100px;
  11.             width:600px;
  12.             height:400px;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.  
  19.     <img id='im1' class='im' src='01.jpg' style='width:220px; height:150px;'>
  20.     <img id='im2' class='im' src='02.jpg' style='width:220px; height:150px;'>
  21.     <img id='im3' class='im' src='03.jpg' style='width:220px; height:150px;'>
  22.     <img id='im4' class='im' src='04.jpg' style='width:220px; height:150px;'>
  23.  
  24. </body>
  25.  
  26. </html>
  27.  
Jul 8 '12 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Laszlo Zsolt Nagy | last post by:
I would like to load image from a directory right into an image list. I wrote a simple library that loads the images in the directory and resizes them as needed before adding to the wx.ImageList....
2
by: Bob Sanderson | last post by:
1) Image "A" appears when page is opened 2) When mouse is rolled over Image "A" it is replaced with image "B" 3) Image "B" has an image map on it. Can this be done?
2
by: Ester | last post by:
Instead of drag and drop image button from Toolbox and name the image button id on the properties box, I would like to load image button ID from database. I created a database table that stores...
1
by: Novice | last post by:
I'm afraid I will incur the wraith of Mr. Powell on this one - but I did read his #1 FAQ and some others and I still can't figure this out. I created this little c# app. and I have a PictureBox...
6
by: Suraj Joneja | last post by:
Hi All, I've an image control on my ASP.net page. This displays an image named 'Logo.jpg' in the location '~\Images'. Another application can change this image. It can select any image and...
4
by: steve | last post by:
Hi All When I set a buttons image to a image file in the properties window it seems to lock the file even if I clear the button image property in the properties window Sometimes I am editing...
3
by: modermo | last post by:
Hey new to javascript figuring out how to fix this darn problem. I employ an image rollover, and it works beautifully in safari. But in firefox, the image has an annoying blue border around...
2
by: Casimir | last post by:
I am looking into making pure CSS image rollovers. Do you have any clever (and robust) CSS rollover-tricks? Or links to such "in the wild"? I have figured out two methods for this, but have...
8
by: mrking | last post by:
Hello, I have a test site running at http://artbymichaelking.com/DS/ As you can see with the navigation I have the image rollover. I do this with CSS via: .companyrollover a{ display:...
2
by: mrking | last post by:
Before I go ahead and implement this I need to confirm that what I want can be done. The standard image rollover works well, however this time I want to modify it to show the current selected...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.