Results 1 to 7 of 7

Thread: rollover with popup

  1. #1
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default rollover with popup

    Hi all,
    I want to have a rollover button with a toolbox popup. The toolbox script I'm using is overlib. Here is a sample of the code I am trying to get to do this. I think my problem is not knowing javascript syntax.
    Here is a code snippet:

    Code:
    <a href="http://www.shopjamestown.net/ads/lambo.jpg"  alt="Nice Car!" onmouseover="return overlib('<img src=\'http://www.shopjamestown.net/ads/lambo.jpg\' ',ABOVE, OFFSETX, 10, OFFSETY, -50, CAPTION, 'Nice Car!',  TEXTFONTCLASS,'putRight',HEIGHT, 150,  WIDTH, 150 );" onmouseout="return nd();"><img src="http://www.shopjamestown.net/ads/preview-button.jpg" border="0" /></a>
    I can either get the rollover or the tooltip but not both. Can see in the link:
    http://shopjamestown.net/ads/content/view/12/26/

    Any help would be greatly appreciated.
    Sean

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Here's some code I made for you.

    Syntax: <a class="roll">LinkText<div class="rollContent">This will show when rolled over</div></a>

    Note: Keep the solitary 'x' character in the rollPop div.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Test Rollover Popups</title>
    <style type="text/css">
    a .rollContent{display:none;}
    </style>
    </head>
    
    <body>
    <div>
    
    <div id="rollPop" style="position:absolute; display:none;">x</div>
    
    <a class="roll" href="javascript:void(0);">
    	____Link 1____
    	<div class="rollContent">
    		<span style="background-color:#ff0;">Ambassador Kosh 1</span>
    		<br />
    		<img src="http://upload.wikimedia.org/wikipedia/en/b/be/B5_kosh01b.jpg" alt="Ambasador Kosh" />
    	</div>
    </a>
    <br />
    <a class="roll" href="javascript:void(0);">
    	____Link 2____
    	<div class="rollContent">
    		<span style="background-color:#0c0;">Ambassador Kosh 2</span>
    		<br />
    		<img src="http://tbn0.google.com/images?q=tbn:44otxcWxhAeM-M:http://www.geocities.com/Hollywood/Hills/1489/G_itb/itb_kosh.jpg" alt="Ambasador Kosh" />
    	</div>
    </a>
    <br />
    <a class="roll" href="javascript:void(0);">
    	____Link 3____
    	<div class="rollContent">
    		<span style="background-color:#00f;">Ambassador Kosh 3</span>
    		<br />
    		<img src="http://tbn0.google.com/images?q=tbn:fVYSMMcfsaca3M:http://www.visi.com/~wildfoto/tg_wallpaper/tg45.jpg" alt="Ambasador Kosh" />
    	</div>
    </a>
    <br />
    <a class="roll" href="javascript:void(0);">
    	____Link 4____
    	<div class="rollContent">
    		<span style="background-color:#f00;">Ambassador Kosh 4</span>
    		<br />
    		<img src="http://tbn0.google.com/images?q=tbn:LYKmmHQNAYP9lM:http://www.oinc.net/B5/Enc/images/kosh.jpg" alt="Ambasador Kosh" />
    	</div>
    </a>
    <br />
    Kosh is a character in the fictional universe of the science fiction television series Babylon 5. The voice for the character was provided by Ardwight Chamberlain, and he was physically played by Jeffrey Willerth.
    
    <script type="text/javascript">
    (function() {
    	var pop = document.getElementById("rollPop");
    	var popStyle = pop.style;
    	var anchors = document.getElementsByTagName("a");
    	function showRoll(e) {
    		if(!e) e = window.event;
    		var o = e.target? e.target: e.srcElement;
    		while(!o.className || o.className!="roll") o = o.parentNode;
    		o = o.lastChild;
    		while(o.className!="rollContent") o = o.previousSibling;
    		pop.replaceChild(o.cloneNode(true), pop.firstChild);
    		popStyle.display = "block";
    		popStyle.top = (e.pageY? e.pageY: e.clientY)+15 + "px";
    		popStyle.left = (e.pageX? e.pageX: e.clientX)+15 + "px";
    		}
    	function hideRoll(e) {
    		popStyle.display = "none";
    		}
    	for(var i=0, n=anchors.length; i<n; ++i) if(anchors[i].className=="roll") {
    		if(window.addEventListener) {
    			anchors[i].addEventListener("mousemove", showRoll, false);
    			anchors[i].addEventListener("mouseout", hideRoll, false);
    			}
    		else {
    			anchors[i].attachEvent("onmousemove", showRoll);
    			anchors[i].attachEvent("onmouseout", hideRoll);
    			}
    		}
    	})();
    
    </script>
    
    </div>
    </body>
    </html>
    Last edited by Trinithis; 10-02-2007 at 06:43 AM.
    Trinithis

  3. #3
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you, Trinithis.

    Hi Trinithis,
    Thanks alot for the code. I'm sorry for the late response. Is there any way that you know of to add an image swap for the button so that it looks like a rollover button? I have two images of the button. One with blue text and another with red text. I would like to swap the blue one for the red button when I move the mouse over the button, along with the popup.

    Is this possible? It is way over my head.
    Thanks again,
    Sean

  4. #4
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Is this what you mean:

    An image of a button. When the mouse goes over it, the image changes to another image to give the effect of a press (or something). At the same time, when the mouse is over the image, the rollover-popup appears as well. When the mouse moves off the image, the image reverts back to normal and the rollover-popup disappears.
    ?
    Trinithis

  5. #5
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Trinithis,
    Yes, that is what I would like to do. It would be great if the button would look like it is being pressed while at the same time the box pops up with an image preview. I just didn't know if I could get both to be assigned at the same time to the same thing and of course I haven't been able to figure out how to do it.

    Is it possible? And thanks again for the continued help.
    Sean

  6. #6
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Here's some code that demonstrates what you want to do.

    Note: I made a small change for the code in the script tag to fix an issue.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Test Rollover Popups</title>
    <style type="text/css">
    a.roll{cursor: pointer;}
    a .rollContent{display: none;}
    </style>
    </head>
    
    <body>
    <div>
    
    <div id="rollPop" style="position:absolute; display:none;">x</div>
    
    <a class="roll">
    	<img alt="news"
    		src="http://www.battle.net/images/battle/diablo2/images/menu/menu-news-off.gif"
    		onmouseout="this.src='http://www.battle.net/images/battle/diablo2/images/menu/menu-news-off.gif'"
    		onmouseover="this.src='http://www.battle.net/images/battle/diablo2/images/menu/menu-news-ovr.gif'" />
    	<div class="rollContent">
    		<img src="http://www.battle.net/images/battle/diablo2exp/images/arreat-summit.gif" alt="arreatSummit" />
    	</div>
    </a>
    
    <br /><br />
    
    <a class="roll">
    	<img alt="basics"
    		src="http://www.battle.net/images/battle/diablo2/images/menu/menu-basics-off.gif"
    		onmouseout="this.src='http://www.battle.net/images/battle/diablo2/images/menu/menu-basics-off.gif'"
    		onmouseover="this.src='http://www.battle.net/images/battle/diablo2/images/menu/menu-basics-ovr.gif'" />
    	<div class="rollContent">
    		<img src="http://www.battle.net/images/battle/diablo2exp/images/arreat-summit.gif" alt="arreatSummit" />
    	</div>
    </a>
    
    <br />
    
    
    <script type="text/javascript">
    (function() {
    	var pop = document.getElementById("rollPop");
    	var popStyle = pop.style;
    	var anchors = document.getElementsByTagName("a");
    	function showRoll(e) {
    		if(!e) e = window.event;
    		var o = e.target? e.target: e.srcElement;
    		while(!o.className || o.className!="roll") o = o.parentNode;
    		o = o.lastChild;
    		while(o.className!="rollContent") o = o.previousSibling;
    		pop.replaceChild(o.cloneNode(true), pop.firstChild);
    		popStyle.display = "block";
    		popStyle.top = (e.pageY? e.pageY: e.clientY)+15 + "px";
    		popStyle.left = (e.pageX? e.pageX: e.clientX)+15 + "px";
    		}
    	function hideRoll(e) {
    		popStyle.display = "none";
    		}
    	function moveRoll(e) {
    		if(!e) e = window.event;
    		popStyle.top = (e.pageY? e.pageY: e.clientY)+15 + "px";
    		popStyle.left = (e.pageX? e.pageX: e.clientX)+15 + "px";
    		}
    	for(var i=0, n=anchors.length; i<n; ++i) if(anchors[i].className=="roll") {
    		if(window.addEventListener) {
    			anchors[i].addEventListener("mouseover", showRoll, false);
    			anchors[i].addEventListener("mouseout", hideRoll, false);
    			anchors[i].addEventListener("mousemove", moveRoll, false);
    			}
    		else {
    			anchors[i].attachEvent("onmouseover", showRoll);
    			anchors[i].attachEvent("onmouseout", hideRoll);
    			anchors[i].attachEvent("onmousemove", moveRoll);
    			}
    		}
    	})();
    
    </script>
    
    </div>
    </body>
    </html>
    Trinithis

  7. #7
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Trinithis,
    That is pretty much exactly what I needed. Thank you!
    I am hesitant to ask you for anything else because you've helped me so much already.
    What would I need to do to add some type of positioning to the popup box? Would I add it to the css style content in the header? The reason I need the positioning is that the popups need to be rather large to read the text in them. If they aren't positioned within 5 or 6px from the top of the browser they will extend off the screen.
    With overlib, I added the RELY and ABOVE attributes after the img link for the popup where I could specify how far from the top for the popup to appear.

    Again, thanks so much for the continued help.
    Sean

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
  •