Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Additional IDs for Hover Popup

Status
Not open for further replies.
xenowing

xenowing

Technical User
Jan 24, 2010
4
US
Hello - I have this little script that generates a popup when an element is hovered. I'm trying to figure out how to have multiple elements, that each have their own popup.
In the referenced html file there are basically two elements. I've given them their own unique IDs in the HTML, but I have no idea how to add additional unique IDs in the JS, and make this sucker work. Currently, elements #1 and #2 both reveal the #1 popup. I'm trying to have #1 reveal the #1 popup, and #2 reveal the #2 popup.
I hope I've explained clearly.

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Multiple Test</title>

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup1");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup1");
hp.style.visibility = "Hidden";
}
</script>

</head>

<body>

<a id="hoverover1" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me #1!</a>

<br>This is some<br>incidental<br>Text.

<div id="hoverpopup1" style="visibility:hidden; position:absolute; top:0; left:0;"><table bgcolor="#0000FF">
<tr><td><font color="#FFFFFF">This popup #1</font></td></tr>
<tr><td bgcolor="#8888FF">Hello I am popup table 1</td></tr></table>
</div>

<br />
<hr />

<a id="hoverover2" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me #2!</a>

<br>This is some<br>incidental<br>Text.

<div id="hoverpopup2" style="visibility:hidden; position:absolute; top:0; left:0;"><table bgcolor="#00ccFF">
<tr><td><font color="#FFFFFF">This popup #2</font></td></tr>
<tr><td bgcolor="#cccccc">Hello I am popup table 2</td></tr></table>
</div>

</body>
</html>
</code>
 
Sort by date Sort by votes
Hi

xenowing said:
I have no idea how to add additional unique IDs in the JS, and make this sucker work.
Click to expand...
Tried to use proper [tt]id[/tt] instead of always referencing hoverpopup1 ?
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]ShowPopup[/color][teal]([/teal]hoveritem[teal])[/teal]
[teal]{[/teal]
  hp [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][highlight]hoveritem[teal].[/teal]id[teal].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/over(\d)/[/fuchsia][teal],[/teal][green][i]'popup$1'[/i][/green][teal])[/teal][/highlight][teal]);[/teal]

[gray]// Set position of hover-over popup[/gray]
  hp[teal].[/teal]style[teal].[/teal]top [teal]=[/teal] hoveritem[teal].[/teal]offsetTop [teal]+[/teal] [purple]18[/purple][highlight pink][teal]+[/teal][green][i]'px'[/i][/green][/highlight][teal];[/teal]
  hp[teal].[/teal]style[teal].[/teal]left [teal]=[/teal] hoveritem[teal].[/teal]offsetLeft [teal]+[/teal] [purple]20[/purple][highlight pink][teal]+[/teal][green][i]'px'[/i][/green][/highlight][teal];[/teal]

[gray]// Set popup to visible[/gray]
  hp[teal].[/teal]style[teal].[/teal]visibility [teal]=[/teal] [green][i]"Visible"[/i][/green][teal];[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]HidePopup[/color][teal]([/teal][highlight]hoveritem[/highlight][teal])[/teal]
[teal]{[/teal]
  hp [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][highlight]hoveritem[teal].[/teal]id[teal].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/over(\d)/[/fuchsia][teal],[/teal][green][i]'popup$1'[/i][/green][teal])[/teal][/highlight][teal]);[/teal]
  hp[teal].[/teal]style[teal].[/teal]visibility [teal]=[/teal] [green][i]"Hidden"[/i][/green][teal];[/teal]
[teal]}[/teal]
Code: 
[b]<a[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"hoverover1"[/i][/green] [maroon]style[/maroon][teal]=[/teal][green][i]"cursor:default;"[/i][/green] [maroon]onMouseOver[/maroon][teal]=[/teal][green][i]"ShowPopup(this)"[/i][/green] [maroon]onMouseOut[/maroon][teal]=[/teal][green][i]"HidePopup([highlight]this[/highlight])"[/i][/green][b]>[/b]Hover over me #1![b]</a>[/b]

[b]<a[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"hoverover2"[/i][/green] [maroon]style[/maroon][teal]=[/teal][green][i]"cursor:default;"[/i][/green] [maroon]onMouseOver[/maroon][teal]=[/teal][green][i]"ShowPopup(this)"[/i][/green] [maroon]onMouseOut[/maroon][teal]=[/teal][green][i]"HidePopup([highlight]this[/highlight])"[/i][/green][b]>[/b]Hover over me #2![b]</a>[/b]
Note that you have to specify the unit of measurement ( the modification marked with pink ).

Feherke.
 
Upvote 0 Downvote
It works! Thank you very much, I've been tinkering with this for days.
I don't exactly understand how
(/over(\d)/,'popup$1')
works, but I like it. :)
 
Upvote 0 Downvote
Hi

xenowing said:
I don't exactly understand how
(/over(\d)/,'popup$1')
Click to expand...
Well, hoveritem.id is a [tt]String[/tt] and the [tt]replace()[/tt] method performs a regular expression substitution :

searches for this :
[tt] [red].------- literal string 'over'[/red]
[red]|[/red] [green].--- captures what is matched between the parenthesis[/green]
[red]_|[/red] [green]/[/green][blue].--- a digit character ( '0'..'9' )[/blue]
[red]/ \[/red][green]|[/green][blue]/\[/blue][green]|[/green]
/[red]over[/red][green]([/green][blue]\d[/blue][green])[/green]/[/tt]

and replaces it with this :
[tt] [purple].------- literal string 'popup'[/purple]
[purple]_|_[/purple] [blue].--- the content of the 1[sup]st[/sup] captured group[/blue]
[purple]/ \[/purple][blue]/\[/blue]
'[purple]popup[/purple][blue]$1[/blue]'[/tt]

So 'hover[red]over[/red][blue]1[/blue]' is transformed to 'hover[purple]popup[/purple][blue]1[/blue]'. ( Matching the following digit too is needed to avoid replacing the first occurrence of 'over' like this : 'h[red]over[/red]over1' -> 'h[purple]popup[/purple]over1'. )


Feherke.
 
Upvote 0 Downvote
You explanation is very helpful. Thank you for teaching me.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
303
Rayj0000
Rayj0000
michael12061206
  • Locked
  • Question
free javascript library for airliner diagrams
Replies
1
Views
96
xwb
xwb
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
112
chikwendu
chikwendu
James Mcgill
  • Locked
  • Question
Schema for a haikus
Replies
0
Views
70
James Mcgill
James Mcgill
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
128
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top