This site requires JavaScript turned on. Your browser does not support JavaScript, or it has JavaScript disabled. If you want to correctly view all the pages on this site, please upgrade your browser or enable JavaScript support. Thank you for taking the time to visit.

« Links open in new window/tab »

Free Site Search Engine at JRank.org

« Links open in new window/tab »

Monitor Page for Changes

Share |

CSS - Pop-up Images Using Inline Links
PayneLess Designs

Two steps to install Pop-up Images With Inline Links

Step 1: Either install following code on separate stylesheet, without the HTML style tags, or between the <HEAD> tags of an HTML document as shown:

CSS Used:

<head>
<style type="text/css">
a.screen, a.screen:visited {
color:#c00;
position:relative;
z-index:1;
}

a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:200px; /* give it a width */
height:0; /* no height to solve an Opera bug that makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:0; /* position:the image */
top:-150px;
}

a.screen:hover {
text-decoration:none;
border:0; /* needed for this to work in IE */
z-index:1000;
}

a.screen:hover b {
visibility:visible; /* make the image visible */
height:150px; /* now give it a height */
cursor:pointer; /* for IE */
z-index:500;
}

a.screen:hover b img {
border:0; /* remove the link border */
}

ul { margin: 5% auto; }
li { list-style-type: none; }
</style>
</head>

Step 2: Insert following code between <BODY> tags of an HTML document:

HTML:

<body>
<ul>
<li class="list"><a class="screen" href="http://www.cssplay" onclick="window.open (this.href, ''); return false">Pop-up image with this link.  Try it.<b><img src="../../imgs/ani_/ani_himom.gif" alt="Hi Mom!" title="Hi Mom!" /></b></a></li>
</ul>

NOTE: Image dimensions are set in styling for:  height="150" width="200".  Use images this size or reset image size in styling for what you want.
</body>

If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

CSS - Pop-up Images Using Inline LinksPayneLess Designs

Two steps to install Pop-up Images With Inline Links

CSS - Pop-up Images Using Inline Links
PayneLess Designs