/    Sign up×
Community /Pin to ProfileBookmark

Roll-over effect request

Copy linkTweet thisAlerts:
Feb 16.2005

I have a special request.

I’m looking to have a <div>. In it:
— a single picture at the top, centered
— below text

What I would like to have a a roll-over effect where you hover over text, and that centered picture changes. I want to display a lot of logo designs that I have. Maybe, instead of that, have miniture pictures (thumbnails) instead of text and the same thing happen.

I’m not sure what kind of code I should use. And from there, I’m not sure how I should go about it. Anyone have ideas for this? Or better, code that I could look at to try out?

to post a comment
Full-stack Developer

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@the_treeFeb 17.2005 — Adapt this script.[CODE]<script type="text/javascript">
function change() {
var num = Math.round(Math.random() * 2);
if(num == 0)
document.getElementById("logo").src = "images/index/logo-grimtoaster.jpg";
else if(num == 1)
document.getElementById("logo").src = "images/index/logo-tophat.jpg";
else if(num == 2)
document.getElementById("logo").src = "images/index/logo-shoes.jpg";
}
function unchange() {
document.getElementById('logo').src = 'images/index/logo-normal.jpg'
}
</script>
<img class="logo" id="logo" src="images/index/logo-normal.jpg" alt="Terry & Shoes"
onmouseover="change();" onmouseout="unchange();" />[/CODE]
×

Success!

Help @gumbystation 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...