|
mtfm -> CSS picture popup with another picture overlay. (6/7/2006 13:32:23)
|
OK, so I was looking at the dynamic drive CSS picture popups, and have come up with a cool adaptation I think might be useful. I figured out how to not only have the picture pop up, but to add another picture overlay wherever I want.
I do a procedure manual trying to explain an old, unix, text-based application...and there are 20+ text fields on some screens.....so it is very useful to be able to have a pointer to show exactly where your cursor should be at each step. I can do this and have unlimited variations, all using only 2 images! [sm=yupi3ti.gif]
Note: I only have access to IE version 6, so I have no idea whether it will work in other browsers or not.
I don't unfortunately have a public site I can show it in action, but here is the code. I hope someone finds this as useful as I do.
I am happy to be able to contribute as this forum has been most helpful to me.
Andrew
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Picture Popup Test</title>
<!-- Source: Dynamic Drive CSS Library -->
<!-- URL: http://www.dynamicdrive.com/style/ -->
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -15px;
left: 60px; /*position where enlarged image should offset horizontally */
}
img.x
{
position:absolute;
left:50px;
top:50px;
z-index:99
}
img.y
{
position:absolute;
left:50px;
top:200px;
z-index:99
}
</style>
</head>
<body>
<h1>ACPF screen</h1>
<p><a class="thumbnail" href="#thumb">Enter your name<span><img src="acpf.PNG" /><br />This is the ACPF Screen. Enter your name by the arrow. <img class="x" src="rightarrow.gif" width="54" height="30" /></span></a> into
the appropriate spot.</p>
<p><a class="thumbnail" href="#thumb">Enter your email address <span><img src="acpf.PNG" /><br />This is the ACPF Screen. Enter your complete email address by the arrow. <img class="y" src="rightarrow.gif" width="54" height="30" /></span> </a>
</p>
<p> <a class="thumbnail" href="#thumb">Enter both your name and address.<span><img src="acpf.PNG" /><br />This is the ACPF Screen. Enter your name and email address in the appropriate spots. <img class="x" src="rightarrow.gif" width="54" height="30" /> <img class="y" src="rightarrow.gif" width="54" height="30" /></span></a> into the appropriate spots.
</body>
</html>
|
|
|
|
