/    Sign up×
Community /Pin to ProfileBookmark

Larger image on hover over a link – 2 ways, both not working!

Copy linkTweet thisAlerts:
Feb 21.2008

I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I’ve tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options?

Option 1 is here:
[url]http://concrete-creative.com/temp/print/1.html[/url]
**What I don’t like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up.

Option 1_B is here:
[url]http://concrete-creative.com/temp/print/1_B.html[/url]
**The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide.

Can someone help me find the happy medium between these 2 solutions so it works the way I want it to?

THANKS!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@DeathFeb 21.2008 — The problem is your using tables for layouts here's one solution that involves simple JavaScript.

[code=html]<html>
<head>
<script type="text/javascript">

function showElement(show) {
document.getElementById(show).style.display="block";
return;

function hideElement(hide) {
document.getElementById(hide).style.display="none";
return;
}

</script>
</head>
<body>
<p>
<img src="thumbnail.jpg" alt="" />
<a href="#" onmouseover="showElement('largerImage');">Jack It Up</a>
</p>

<div id="largerImage" style="display:none; z-index:100; width:400px; background-color:#000;">
<img src="largerImage.jpg" alt="" />
<a style="float:right;" href="#" onmouseover="hideElement('largerImage');">Close</a>
</div>
</body>
</html>[/code]

Of course you will have to add a lot more style to it but it should work the way you want it because you can put it any where on the screen.

Thanks, Death
Copy linkTweet thisAlerts:
@WebJoelFeb 22.2008 — <div id=[COLOR=#0000ff]"largerImage"[/COLOR] style=[COLOR=#0000ff]"display:none; [B][COLOR="Red"]z-index:100;[/COLOR][/B] width:400px; background-color:#000;"[/COLOR]>[/QUOTE] z-index only affects the stack-order on elements that have been 'postioned', either "relative" or "absolute". The default here is "static", so the z-index:100 as used here is no better than z-index:0 (also default)

?
Copy linkTweet thisAlerts:
@chausfeldauthorFeb 22.2008 — Are you saying to leave the z-index out since it doesn't make a difference, or are you saying that "Death"'s solution won't work?
Copy linkTweet thisAlerts:
@smyhreFeb 22.2008 — What he is saying is that unless that div largerImage is positioned absolute or relative z index has absolutely no effect.
Copy linkTweet thisAlerts:
@chausfeldauthorFeb 22.2008 — this seems to work perfectly. thanks so much!
×

Success!

Help @chausfeld 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.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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