/    Sign up×
Community /Pin to ProfileBookmark

Only Showing An Image When Mouse Is In Certain Spot?

Copy linkTweet thisAlerts:
Jan 15.2004

I was wondering how to make it so that when the viewer’s mouse came across a certain part of the webpage, an image would pop up. For example: If i have a index page that said something like

1-my favorite sites
2-Why i’m so awesome
3-hobbies
4-leave a message

and let’s say that i want to make it so that when the viewers mouse scrolls or hovers above “1-my favorite sites” a little picture would come up to the right of it and showed all the sites. And when the viewers mouse scrolled or hovered over “2-why i’m so awesome” a picture would pop up to the right and show the reasons… etc…

Also, i need to know how to designate to the computer the bounding box for each item.

THANKS!
Alex
[email][email protected][/email]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliJan 16.2004 — there are tonnes of mousever menu out there..just search the google
Copy linkTweet thisAlerts:
@rhsundergroundJan 16.2004 — this is the basic layout:
[code=php]
<div id="1main" style="postition: absolute; top: X; left: Y" onMouseover="1popup.style.visibility='visible'" onMouseout="1popup.style.visibility='hidden'"> 1 blah blah blah</div><br>
<div id="2main" style="postition: absolute; top: X; left: Y" onMouseover="2popup.style.visibility='visible'" onMouseout="2popup.style.visibility='hidden'"> 2 blah blah blah</div><br>
<div id="3main" style="postition: absolute; top: X; left: Y" onMouseover="3popup.style.visibility='visible'" onMouseout="3popup.style.visibility='hidden'"> 3 blah blah blah</div><br>
<div id="4main" style="postition: absolute; top: X; left: Y" onMouseover="4popup.style.visibility='visible'" onMouseout="4popup.style.visibility='hidden'"> 4 blah blah blah</div><br>

<div id="1popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="1popup.style.visibility='visible'" onMouseout="1popup.style.visibility='hidden'">1 blah whatever</div>
<div id="2popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="2popup.style.visibility='visible'" onMouseout="2popup.style.visibility='hidden'">2 blah whatever</div>

<div id="3popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="3popup.style.visibility='visible'" onMouseout="3popup.style.visibility='hidden'">3 blah whatever</div>

<div id="4popup" style="position: absolute; top: pi; left: e; visibility: hidden" onMouseover="4popup.style.visibility='visible'" onMouseout="4popup.style.visibility='hidden'">4 blah whatever</div>

[/code]
that's about what they'll give you. it's similar to the reeeeeally basic dropdown i've linked to [URL=http://www.geocities.com/crazydude33/thegreatestwebpageintheworld.html]here[/URL] for reference. enjoy.
Copy linkTweet thisAlerts:
@Khalid_AliJan 16.2004 — The above posted solution does not work with NS6+ browsers..just a caution..?
×

Success!

Help @brds 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.16,
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,
)...