Since I couldn't do the two image swap, I decided to try the "more popular on google" no-preload single image rollover. But that isn't working for me either. Please fix the errors I made. I use Dreamweaver MX and (in the "design view")I don't even get the blank DIV where the image is suppossed to be.
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:
.photo a {
display: block;
width: 199px;
height: 121px;
position: absolute;
left: 500px;
top: 1040px;
background: transparent url("images/SmallPhotoTwo.jpg") no-repeat;
}
.photo a:hover {
background-position: -121px 0;
}Try this:Thanks.
I had that example from before. The example uses 3 states: normal, hover and active, and there are 3 images glued together. In mine I have only normal and hover (2 images glued). I don't want to use 3 states, since my images are big and will require having 3 images at size 199 X 121 each, pieced together.
I tried the example in several different ways, but couldn't get it to work. I might surrender to continuing to use the Dreamweaver rollovers -- which I think are java script.Modified for only two image states.Thanks for making it two images for me. I haven't had a chance to look at your example yet. I had already done it the old fashioned way with Dreamweaver and the Java Script code it generates.
Also, I've got this link from another forum's posting for a web-rollover-maker program: it's impressive: depending on the settings you input, it generates the code for you custom rollover.
<!-- m --><a class="postlink" href="http://www.collylogic.com/scripts/rollover.html">http://www.collylogic.com/scripts/rollover.html</a><!-- m -->
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:
.photo a {
display: block;
width: 199px;
height: 121px;
position: absolute;
left: 500px;
top: 1040px;
background: transparent url("images/SmallPhotoTwo.jpg") no-repeat;
}
.photo a:hover {
background-position: -121px 0;
}Try this:Thanks.
I had that example from before. The example uses 3 states: normal, hover and active, and there are 3 images glued together. In mine I have only normal and hover (2 images glued). I don't want to use 3 states, since my images are big and will require having 3 images at size 199 X 121 each, pieced together.
I tried the example in several different ways, but couldn't get it to work. I might surrender to continuing to use the Dreamweaver rollovers -- which I think are java script.Modified for only two image states.Thanks for making it two images for me. I haven't had a chance to look at your example yet. I had already done it the old fashioned way with Dreamweaver and the Java Script code it generates.
Also, I've got this link from another forum's posting for a web-rollover-maker program: it's impressive: depending on the settings you input, it generates the code for you custom rollover.
<!-- m --><a class="postlink" href="http://www.collylogic.com/scripts/rollover.html">http://www.collylogic.com/scripts/rollover.html</a><!-- m -->