|
| |
|
|
womble
Posts: 5721
Joined: 3/14/2005
From: Living on the edge
Status: offline
 |
Need a javascript code snippet (I think) for CSS popup - 6/13/2007 19:27:33
I'm using this CSS method for an imagemap on a site I'm doing, which is working well, apart from one problem. The CSS popups don't work with keyboard navigation. I've tried adding a focus state into the stylesheet, but although the hover images appear, no pop-up with further information. The code for each item's wrapped in a <a> tag, so I should be able to use a js onfocus event handler to trigger the pop-ups....
<li id="mercury"><a href="#nogo" class="tl">MERCURY<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">
<em class="point_left"></em>
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h1>Mercury</h1>
<p>Mercury is a lump of rock, barely larger than the Moon</p>
<a href="http://en.wikipedia.org/wiki/Mercury_(planet)">Wikipedia</a>
<a href="http://www.solarsystem.org.uk/mercury/">A planet of extremes</a>
<a href="http://www.nineplanets.org/mercury.html">General Information</a>
</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
The major problem here is my distinct lack of js knowledge (I've forgetten most of what I knew because I simply don't use it often. I did a JS course last year, but to be honest js isn't my favourite thing and I tend to avoid it wherever possible, and I only just passed the course. Because all the CSS and everything's working fine apart from the pop-ups not working with a fcous state in the CSS, I really don't want to change anything in the XHTML unless I really have to.
Is there a simple js code snippet using onfocus that'll display the pop-ups/tooltips without too much hassle?
I've googled and googled until I'm not sure what I'm doing any more, and all the js examples I've seen are very specific to the tooltip code they're written for. Is there something.
g generic out there that'll do the work without me re-writing lots of chunks of code?
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
|
|
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
|
RE: Need a javascript code snippet (I think) for CSS popup - 6/13/2007 21:38:14
Does it have to be a popup? I regularly use a JS that updates a <div> on mouseover but I usually put it in a static place.
I have had it slide up and down so it is relative to the top of the window and not the page so it is always in view. I'll share if you think it may be something you can use. Here is the full page code with just that example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<script>
<!--
var content=new Array()
content[0]='The default text in the content div.'
content[1]='The text for the first mouseover.'
content[2]='The text for the second mouseover.'
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
appear()
setTimeout("window.onresize=regenerate",450)
}
}
function changetext(whichcontent){
if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions
cross_el.innerHTML=whichcontent
}
else if (document.layers){
document.d1.document.d2.document.write(+whichcontent)
document.d1.document.d2.document.close()
}
}
function appear(){
document.d1.visibility='show'
}
window.onload=regenerate2
//-->
</script>
<style>
#descriptions
{
font-size: 1em;
}
</style>
</HEAD>
<BODY>
<span ID='myChaser'>
<ilayer id="d1" width="95" visibility="hide">
<layer id="d2" width="95">
<span id="descriptions" align="left" valign="top">
The original text goes here.
</span>
</layer>
</ilayer>
</span>
<br>
<a href="#" onMouseover="changetext(content[1])" onMouseout="changetext(content[0])">Test Mouseover One</a><br>
<a href="#" onMouseover="changetext(content[2])" onMouseout="changetext(content[0])">Test Mouseover Two</a><br>
</BODY>
</HTML>
Hope it works for you. If it doesn't directly let me know and I should be able to adapt it to make the <div> position relatively to the mouse without too much work.
It should be able to be adapted to use direct input on the <a> tag by simply this:
<a href="#" onMouseover="changetext('Direct inline message.)" onMouseout="changetext(content[0])">Test Mouseover Three</a><br>
but me being a DB guy, I almost invarianbly feed the content array (content[0], content[1], etc.) stuff from a database and build the script dynamically.
Hope it helps.
< Message edited by rdouglass -- 6/13/2007 21:44:19 >
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
and mostly I understand it when I see it, but I'm not too good at writing it myself. I'll take a look at that though and see if it'll work with what I've got.
