rollover with popup

**bridgerboy** · 10-01-2007, 09:52 PM

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

**Trinithis** · 10-02-2007, 06:33 AM

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>

**bridgerboy** · 10-04-2007, 04:58 AM

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

**Trinithis** · 10-04-2007, 05:14 AM

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.
?

**bridgerboy** · 10-05-2007, 03:28 AM

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

**Trinithis** · 10-05-2007, 04:20 AM

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>

**bridgerboy** · 10-07-2007, 05:40 PM

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

Thread: rollover with popup

Thread Tools

Search Thread

rollover with popup

Thank you, Trinithis.

Bookmarks

Bookmarks

Posting Permissions