/    Sign up×
Community /Pin to ProfileBookmark

Change images by ID?

Is there anyway to give images id’s or classes and do something like:

[CODE]
img.classname { some code to make the src equal to something else; };
[/CODE]

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@David_HarrisonFeb 17.2007 — It sounds like you're after a CSS based image rollover code. If so, then try this on for size.

[upl-file uuid=ddfc3e6b-a0de-4a5a-b5f5-87bb3851c7fa size=19kB]CSS Image Rollover.zip[/upl-file]
Copy linkTweet thisAlerts:
@AscendancyauthorFeb 17.2007 — Actually, that's basically what I want but I want it to always be stationary, like not change the image. It would be one image on one stylesheet, and then have an alt. stylesheet that loads a different banner.
Copy linkTweet thisAlerts:
@David_HarrisonFeb 17.2007 — Well in that case, set the image as a background to something, then in the alternate stylesheet you can overrule the previous background image setting, something like this:#someID{
background: url(image1.jpg) no-repeat top left;
display:block;
width:100px;
height:100px;
}

#someID{
background: url(image2.jpg) no-repeat top left;
}
The only problem might be that the "image" would have to be a block level element, so it would push itself onto it's own line. To counter-act that you could apply float:left or float:right to #someID, which would always keep it on the left or right of the line, and perhaps throw in another element at the end of the sectio with the image in and set clear:both; on it.

Another alternative might be to set the image as a background to an already existing element, and add some padding to that element to keep text from appearing over the top of it.

I could give a more specific example if you showed me the page in question.
Copy linkTweet thisAlerts:
@AscendancyauthorFeb 18.2007 — Oh it's okay, I understand exactly what you're saying. Thanks for your help!
×

Success!

Help @Ascendancy 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.20,
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,
)...