Mouseover = text

[wentwooddownhill]

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:



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]

What you want is an image map. Have a look here.

[wentwooddownhill]

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]

You can set onmouseover attributes on the <area>s just as if they were links.

[wentwooddownhill]

could you expand on that a bit please, or maybe a smple bit of code would help a lot cheers.

[Twey]

Well, for example,

<area shape="rect" coords="0, 0, 50, 50" onmouseover="document.getElementById('myElement').firstChild.nodeValue = 'Some text';">

[jscheuer1]

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]

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). 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]

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

[jscheuer1]

Cheers for the help. I already have div elements set up etc. Didnt want to cause an argument between you guys
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.