PDA

View Full Version : Mouseover = text



wentwooddownhill
07-05-2007, 07:01 PM
hi,
basically i wold like it so that on a site i am upgrading if you hover your mouse over the image of a person then a mini portfolio appears on the side of them. See Image below:

http://img116.imageshack.us/img116/2244/mouseoversz2.png

The one problem i have is that it is just 1 image. On this image are several people so i would like it to be ableot to mouseover these people and show a bit about them.
Any help is appreciated.

Twey
07-05-2007, 07:11 PM
What you want is an image map. Have a look here (http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741).

wentwooddownhill
07-06-2007, 07:24 AM
Ok cheers for the link thats what i wanted.
One problem though. It allows me to set links on the areas i want but i wanted it as a onmouseover afffect where the text appears to the side with no clicking involed. Could anyone help me with this aspect of it.
Cheers

Twey
07-06-2007, 09:03 AM
You can set onmouseover attributes on the <area>s just as if they were links.

wentwooddownhill
07-06-2007, 05:52 PM
could you expand on that a bit please, or maybe a smple bit of code would help a lot cheers.

Twey
07-06-2007, 11:15 PM
Well, for example,
<area shape="rect" coords="0, 0, 50, 50" onmouseover="document.getElementById('myElement').firstChild.nodeValue = 'Some text';">

jscheuer1
07-07-2007, 04:44 AM
Well, for example,
<area shape="rect" coords="0, 0, 50, 50" onmouseover="document.getElementById('myElement').firstChild.nodeValue = 'Some text';">

Still avoiding innerHTML like the plague, I see. Perhaps you should mention that, if you do it that way, you need to have at least a &nbsp; inside the id="myElement" element, and that you cannot insert rich HTML content without considerably more code. I know innerHTML isn't a part of any official standard, but as has been pointed out numerous times, it is here to stay and is the easiest and perhaps even the best (depending upon the situation) method for inserting content.

At the very least, wentwooddownhill should also consider:


document.getElementById('myElement').innerHTML = 'Some text<br>More text'

Twey
07-07-2007, 11:45 AM
If I wanted a quick-and-dirty HTML parser with good support and couldn't be bothered to write my own, innerHTML would be my first port of call. In fact, I've used it fairly extensively (as in my typing text script (http://www.twey.co.uk/?q=typing)). However, for something as simple as this, I see no call to break the standards and lose XHTML support for the script.
Perhaps you should mention that, if you do it that way, you need to have at least a &nbsp; inside the id="myElement" element,Possibly I should have done, but that was only an example, and obviously needs to be adapted for the OP's markup (or have the OP's markup adapted for it). There's probably currently no element with an ID of "myElement" in the markup either.
and that you cannot insert rich HTML content without considerably more code.wentwooddownhill said "text" so I didn't even consider this worth mentioning. Furthermore, it's not exactly "considerably" more code, especially if we use an element-builder function:
function buildElement(nodeName, attributes) {
var v = document.createElement(nodeName);
if(attributes)
for(var x in attributes)
if(attributes.hasOwnProperty(x))
if(x !== "style")
v[x] = x;
else
for(var y in attributes.style)
if(attributes.style.hasOwnProperty(y))
v.style[y] = y;
for(var i = 2; i < arguments.length; ++i)
if(typeof arguments[i] === "string")
v.appendChild(document.createTextNode(arguments[i]));
else
v.appendChild(arguments[i]);
return v;
}It becomes as simple as:
document.getElementById("myElement").appendChild(
buildElement("span", {
'id' : "mySpan",
'style' : {
'display' : "block",
'background-color' : "red"
}
},
"Some inner text")
);Reflects the structure of the HTML fairly well, and is one heck of a lot neater than the horrible multi-line string that usually results from innerHTML.

Of course, that's kind of irrelevant anyway; wentwooddownhill should really already have elements created, and just hide/show them using Javascript (by setting and unsetting the CSS display property).

wentwooddownhill
07-07-2007, 04:25 PM
Cheers for the help. I already have div elements set up etc. Didnt want to cause an argument between you guys :rolleyes:
I will try that now, it all has to lie within the validation rules of w3

jscheuer1
07-07-2007, 06:39 PM
Cheers for the help. I already have div elements set up etc. Didnt want to cause an argument between you guys :rolleyes:
I will try that now, it all has to lie within the validation rules of w3

Twey and I are old buddies. We disagree on certain things, but that doesn't detract from our friendship. We actually agree here in that, I too think you should use pre-existing content in divisions that are in their turn shown and unseen. This can be manipulated, as Twey stated, via each division's display style property.

Should you decide to use innerHTML, their isn't a question of it validating unless your javascript code is sloppy and on the page.

Twey
07-07-2007, 06:49 PM
Aye, it's a debate, not an argument. :)


Should you decide to use innerHTML, their isn't a question of it validating unless your javascript code is sloppy and on the page.Well yes, but in name only. You're deviating from W3C standards anyway, so unless all you care about is that big green "you validated!" page to make yourself feel proud, you probably don't want to go the innerHTML route :p The validator is a good check and catches most things, but it's not conclusive.

jscheuer1
07-07-2007, 07:21 PM
Well, in any case, here is a demo of one way of executing the concept Twey and I both agree on. The anchor links could just as easily be area tags in an image map. Having the display of the #bios section set to none (it gets changed to 'block' if javascript is active), and having links (links that will never fire if javascript is active) to actual pages with the bios on them is one possible non-javascript fall back method for those without javascript enabled.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.bio {
float:left;
margin-left:1em;
height:7em;
width:12em;
padding:1ex;
border:1px solid #444444;
}
#bios, #bios div {
display:none;
}
#bios div div {
color:#666666;
display:block;
}
#bios div#default {
display:block;
}
</style>
<script type="text/javascript">
document.write('<style type="text\/css">\n\
#bios {\n\
display:block;\n\
}\n\
<\/style>');
function reveal(id){
for (var i = 0, b=document.getElementById('bios').getElementsByTagName('div'); i < b.length; i++)
if(b[i].id)
b[i].style.display='none';
document.getElementById(id).style.display='block';
}
</script>
</head>
<body>
<div class="bio"><a href="jim_bio.htm" onmouseover="reveal('jim_bio');" onclick="return false;">Jim</a><br>
<a href="linda_bio.htm" onmouseover="reveal('linda_bio');" onclick="return false;">Linda</a></div>
<div class="bio" id="bios">
<div id="default">Mouse over Each name/image for that person's Bio</div>
<div id="jim_bio">Something About Jim:<div>Jim's cool.</div></div>
<div id="linda_bio">Something About Linda:<div>Linda's smart</div></div>
</div>
</body>
</html>

wentwooddownhill
07-09-2007, 01:44 PM
ive managed to get it to work with an image map to some degree but i think i am getting the <div></div> where the content appears wrong. any advice

jscheuer1
07-09-2007, 04:10 PM
ive managed to get it to work with an image map to some degree but i think i am getting the <div></div> where the content appears wrong. any advice

Give us a link to a demo of the problem and describe in detail what the problem is.