Hi,
I need to make a rollover button with two GIF images: same size, positioned on the same place. It's my first time trying it. Please correct the code that I'm posting, which doesn't work. Also, please don't give me that code (that I mostly see on the web, when I search for rollovers) that includes the two images being glued together on Photoshop, making one file: one above the other, or one next to the other. Thanks.
HTML:
<div id="Layer20" class="photo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com"></a></div>
External CSS:
/* CSS Document */
.photo {
width : 199px;
height : 121px;
position: absolute;
left: 500px;
top: 980px;
z-index: 23;
background-image : url(images/SmallPhoto.gif);
}
.photo:hover {
background-image : url(images/SmallPhotoR.gif);
}That actually works ok in everything but IE. IE doesn't understand :hover on anything but anchors so try adding
.photo a { display:block }
and
<a class="photo" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com">Thanks. ..I was about to surrender and started trying it with the gluing of the two images together, which might be more practical at the end but I don't find it appealing.
So, with your example, should this be the code then.
HTML:
<div id="Layer20"><a class="photo" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com"></a></div>
External CSS:
.photo a {
display: block;
width: 199px;
height: 121px;
position: absolute;
left: 500px;
top: 1040px;
z-index: 23;
visibility: visible;
background-image: url("images/SmallPhoto.gif");
}
.photo a:hover {
background-image: url("images/SmallPhotoR.gif");
}Originally posted by jamesx521
...I was about to surrender and started trying it with the gluing of the two images together, which might be more practical at the end but I don't find it appealing... What makes one technique more appealing than another? Just wondering.What makes it more appealing?:
Since I have design background (and unfortunately m stuck at having to learn code [to keep up with "the economy"]), I lay out the web pages on Photoshop. I put my normal state buttons (graphics) and rollover state buttons on the top of each other, on separate layers. Then, when I crop the images all I have to do is hide the layer(s) that I don't need to see and crop by using the guides I've set up.
If I have to do it in the glu(e)ing image way (with the norm and the roll glued to each other) that means that:
1. I have to duplicate all layers that compose the design of the button.
2. Position the duplicated layers all together in the layers palette.
3. Link the newly duplicated layers.
4. Using the guides, info palette and marquee tool, measure the height and width of my normal state button.
5. Pull new guides that will correspond to the exact height and width of the norm state button.
6. Now move the rollover state button exactly positioning it to fit into the space I created with the guides.
7. Now, turning on and off layers on Photoshop to preview how the rollover will look like no longer shows the real preview, since the rollover state isn't on the right position: instead it's been glued to the side.
Now, having one image instead of two I doubt will save loading time, because the image is double sized and it will load in the same time that two 1/2 size images would load.Originally posted by ray326
That actually works ok in everything but IE. IE doesn't understand :hover on anything but anchors so try adding
.photo a { display:block }
and
<a class="photo" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com"> I believe it was only IE5 that had that problem, but all the same, I think you mean a.photo and a:hover.phot
riginally posted by Triumph
What makes one technique more appealing than another? Just wondering. There's no pre-load for the second image if you do that.
jamesx521 - Here is a CSS rollover effect that you should be able to modify to meet your needs.I believe it was only IE5 that had that problem, but all the same, I think you mean a.photo and a:hover.photo. No, no and no. You're doing the same thing James was, requiring <a class="photo"...>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"" />
<style type="text/css">
td:hover { color:white; background:black }
</style>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<table>
<tr><td>hover me now</td></tr>
</table>
</body>
</html>
I need to make a rollover button with two GIF images: same size, positioned on the same place. It's my first time trying it. Please correct the code that I'm posting, which doesn't work. Also, please don't give me that code (that I mostly see on the web, when I search for rollovers) that includes the two images being glued together on Photoshop, making one file: one above the other, or one next to the other. Thanks.
HTML:
<div id="Layer20" class="photo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com"></a></div>
External CSS:
/* CSS Document */
.photo {
width : 199px;
height : 121px;
position: absolute;
left: 500px;
top: 980px;
z-index: 23;
background-image : url(images/SmallPhoto.gif);
}
.photo:hover {
background-image : url(images/SmallPhotoR.gif);
}That actually works ok in everything but IE. IE doesn't understand :hover on anything but anchors so try adding
.photo a { display:block }
and
<a class="photo" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com">Thanks. ..I was about to surrender and started trying it with the gluing of the two images together, which might be more practical at the end but I don't find it appealing.
So, with your example, should this be the code then.
HTML:
<div id="Layer20"><a class="photo" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com"></a></div>
External CSS:
.photo a {
display: block;
width: 199px;
height: 121px;
position: absolute;
left: 500px;
top: 1040px;
z-index: 23;
visibility: visible;
background-image: url("images/SmallPhoto.gif");
}
.photo a:hover {
background-image: url("images/SmallPhotoR.gif");
}Originally posted by jamesx521
...I was about to surrender and started trying it with the gluing of the two images together, which might be more practical at the end but I don't find it appealing... What makes one technique more appealing than another? Just wondering.What makes it more appealing?:
Since I have design background (and unfortunately m stuck at having to learn code [to keep up with "the economy"]), I lay out the web pages on Photoshop. I put my normal state buttons (graphics) and rollover state buttons on the top of each other, on separate layers. Then, when I crop the images all I have to do is hide the layer(s) that I don't need to see and crop by using the guides I've set up.
If I have to do it in the glu(e)ing image way (with the norm and the roll glued to each other) that means that:
1. I have to duplicate all layers that compose the design of the button.
2. Position the duplicated layers all together in the layers palette.
3. Link the newly duplicated layers.
4. Using the guides, info palette and marquee tool, measure the height and width of my normal state button.
5. Pull new guides that will correspond to the exact height and width of the norm state button.
6. Now move the rollover state button exactly positioning it to fit into the space I created with the guides.
7. Now, turning on and off layers on Photoshop to preview how the rollover will look like no longer shows the real preview, since the rollover state isn't on the right position: instead it's been glued to the side.
Now, having one image instead of two I doubt will save loading time, because the image is double sized and it will load in the same time that two 1/2 size images would load.Originally posted by ray326
That actually works ok in everything but IE. IE doesn't understand :hover on anything but anchors so try adding
.photo a { display:block }
and
<a class="photo" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.test.com"> I believe it was only IE5 that had that problem, but all the same, I think you mean a.photo and a:hover.phot
riginally posted by Triumph What makes one technique more appealing than another? Just wondering. There's no pre-load for the second image if you do that.
jamesx521 - Here is a CSS rollover effect that you should be able to modify to meet your needs.I believe it was only IE5 that had that problem, but all the same, I think you mean a.photo and a:hover.photo. No, no and no. You're doing the same thing James was, requiring <a class="photo"...>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"" />
<style type="text/css">
td:hover { color:white; background:black }
</style>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<table>
<tr><td>hover me now</td></tr>
</table>
</body>
</html>