/    Sign up×
Community /Pin to ProfileBookmark

Another image rollover problem

Copy linkTweet thisAlerts:
Feb 27.2005

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:

[CODE]
<div id=”Layer20″ class=”photo”><a href=”http://www.test.com”></a></div>
[/CODE]

External CSS:

[CODE]
.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;
}
[/CODE]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonFeb 27.2005 — Try this:

[upl-file uuid=369e34f3-df1a-4de0-a5b2-415557fcb648 size=16kB]cssimagerollover.zip[/upl-file]
Copy linkTweet thisAlerts:
@jamesx521authorFeb 27.2005 — 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.
Copy linkTweet thisAlerts:
@David_HarrisonFeb 27.2005 — Modified for only two image states.

[upl-file uuid=7a632924-d6c4-4e5e-bade-4d29534132f8 size=15kB]cssimagerollover2.zip[/upl-file]
Copy linkTweet thisAlerts:
@jamesx521authorFeb 28.2005 — 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.

[URL]http://www.collylogic.com/scripts/rollover.html[/URL]
×

Success!

Help @jamesx521 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...