Cause a graphic popup from a distant link

HTML & CSS
1

I believe this is a little known feature. You can cause a graphic to popup anywhere on a page by hovering over a link (text or graphic) anywhere on the page. To see this in action go to http://dublincyclery.com and hover over the link at the bottom of each page “networks, etc” :smiley:

2

Hi,

It’s not that unknown - It’s simply an image inside an anchor that is shown on hover. it’s quite simple really.


a img { display: none }
a:hover img { display: block }
<a href="#">linky <img src="eg.gif"></a>
3

Hi Sarah, :slight_smile:
It’s called a Disjointed Rollover and it is done by nesting an inline element within the anchor, an image in that case. The pop-up element has position:absolute; applied to remove it from the page flow and is typically hidden with visibility:hidden; or a large negative-margin.

Hide pop-up with [FONT=Courier New]visibility:hidden[/FONT]
Hide pop-up with [FONT=Courier New]negative-margin[/FONT]

IE6 will have trouble with the visibility method sometimes and it is important to trip haslayout in the right spots. I think Paul’s article explains it further but I remember IE6 being troublesome.

That example you linked to is lacking a containing block for the AP’d img. They have not set position:relative; anywhere so it is positioning from the body element. That is why they have that huge top:2100px; positioning. The positioning falls apart when the text is zoomed. :sick:


[B]#pix a img.hid[/B] {
    width: 322px; 
    height: 238px;
    position: absolute; 
    [B]top: 2100px; [/B]
    left: 15px;
    visibility: hidden;  
}

#pix a:hover {background:white;}

#pix a:hover [B]img.hid[/B] {visibility:visible; border:none; }

<td id = [B]"pix"[/B] align="center">
    <font size="1" face="Arial, Helvetica, sans-serif">
        Site maintained by: 
        [B]<a href[/B]="mailto:wombat266@comcast.net">
            <font face="papyrus" size="2"> networks, etc.</font>
            <img class =[B]"hid"[/B] src="littlekids.gif">
        [B]</a>[/B]
    </font>
</td>
4

Thanks Rayzur, Actually, IE6 didn’t have any trouble with this code. Tested on IE6, IE8, Firefox and Chrome. I couldn’t get the containing block to work :badpc: so I had to go from the body element.

5

Hi Sarah,
You could establish a containing block by wrapping the anchor in a “p” tag. Then hook the position:relative; to that “p”. A p is a block level element so it would fill the width of that <td> and your left:15px; would still be correct.

Like this -

[B]#pix a img.hid[/B] {
width: 322px; 
height: 238px;
position: absolute;
[COLOR=Blue]top: -280px;[/COLOR][COLOR=DarkGreen]/*adjust to your preference*/[/COLOR]
[COLOR=Blue]left:15px;[/COLOR]
visibility: hidden; 
 }

[COLOR=Blue][B]#pix p[/B][/COLOR] {[COLOR=Blue]position:relative;[/COLOR]}

#pix a:hover  {background: white; }
#pix a:hover img.hid {visibility: visible; border: none; }


<td id="pix" align="center">
[B][COLOR=Blue]<p>[/COLOR][/B]
<font face="Arial, Helvetica, sans-serif" size="1">Site maintained by: 
 <a href="mailto:wombat266@comcast.net"><font face="papyrus" size="2"> networks, etc.</font><img class="hid" src="littlekids.gif"></a></font>
[B][COLOR=Blue]</p>[/COLOR][/B]
</td>
6

Rayzur, Great!!! Thanks a LOT!!! Perfect! I will do this. :nanaman:

7

Thanks Rayzur, … I have implemented your suggestions and it works just fine.:smiley: