SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie - Roll over text, image popup in fixed location

    Hi all

    Newbie, looking for some advice.

    I want to be able to rollover text and have images appear in a fixed location on the page, no matter where the text is located.

    I have been able to get roll over text, image pop up to work but the image is a set point relative to the mouse.

    I hope someone can help, I can provide further information if required.

    I am using a javascript and css

    Thanks

    Lee

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, welcome to Sitepoint

    If you want it in a fixed position then you will need to use position:fixed and then it is always placed in relation to the viewport and not its nearest positioned ancestor.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .popup {
    	zoom:1.0;
    	position:relative;
    	text-decoration:none;
    	background:#ccc;
    	color:#f00;
    }
    .popup span {
    	position:fixed;
    	top:20px;
    	left:20px;
    	width:200px;
    	padding:10px;
    	background:#fcf;
    	font-weight:bold;
    	text-align:center;
    	border:10px solid #000;
    	border-radius:10px;
    	left:-999em;
    	z-index:990;
    }
    .popup:hover {visibility:visible}
    .popup:hover span {left:20px;}
    * html .popup span {position:absolute;}
    </style>
    </head>
    <body>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p><a class="popup" href="#">..................................test popup <span>This is the message box</span></a> </p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p><a class="popup" href="#">..................................test popup <span>This is the second message box showing in the same position</span></a> </p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    <p>scrolling content</p>
    </body>
    </html>
    IE6 doesn't understand position:fixed and gets position:absolute instead.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •