Text einblenden

Jan2

Hallo!

Ich habe in einer Karte mit shape="rect" coords="..." einen Bereich definiert.
Nun möchte ich, dass neben der Maus ein Wort (zB. Berlin) eingeblendet wird, wenn man auf diesen Bereich zeigt.
Wie kann ich so etwas einblenden?

xXx_BaSStar_xXx

Hier habe ich dir was zusammen gebaut.
Musst du dir nurnoch auf deine map anpassen,
müsste eigentlich funktionieren... wenn nicht einfach fragen!

Jan2

Ich kann die Datei leider nicht öffnen.
Kannst du mir das auch (verkürzt) direkt in den Beitrag schreiben?

xXx_BaSStar_xXx

Hm warum kannst du die Datei nich öffnen... weils js is ev.
Ich ändere das und den Link auch... hier trotzdem der Code.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">




<script type="text/javascript">


var Xoffset= -5;        // modify these values to ...
var Yoffset= 10;        // change the popup position.
var popwidth=150;       // popup width
var bcolor="black";     // popup border color
var fcolor="black";     // popup font color
var fface="verdana";    // popup font face


document.write("<DIV ID='pup'></DIV>");
var iex=(document.all);
var nav=(document.layers);
var old=(navigator.appName=="Netscape" && !document.layers && !document.getElementById);
var n_6=(window.sidebar);


var skin;
if(nav) skin=document.pup;
if(iex) skin=pup.style;
if(n_6) skin=document.getElementById("pup").style;


var yyy=-1000;


if(nav)document.captureEvents(Event.MOUSEMOVE);
if(n_6) document.addEventListener("mousemove",get_mouse,true);
if(nav||iex)document.onmousemove=get_mouse;


function get_mouse(e)
{
  var x,y;


  if(nav || n_6) x=e.pageX;
  if(iex) x=event.x+document.body.scrollLeft; 

  if(nav || n_6) y=e.pageY;
  if(iex)
  {
    y=event.y;
    if(navigator.appVersion.indexOf("MSIE 4")==-1)
      y+=document.body.scrollTop;
  }


  if(iex || nav)
  {
    skin.top=y+yyy;
    skin.left=x+Xoffset; 
  }


  if(n_6)
  {
    skin.top=(y+yyy)+"px";
    skin.left=x+Xoffset+"px";
  }    
  nudge(x);
}


function nudge(x)
{
  var extreme,overflow,temp;


  // right
  if(iex) extreme=(document.body.clientWidth-popwidth);
  if(n_6 || nav) extreme=(window.innerWidth-popwidth);


  if(parseInt(skin.left)>extreme)
  {
    overflow=parseInt(skin.left)-extreme;
    temp=parseInt(skin.left);
    temp-=overflow;
    if(nav || iex) skin.left=temp;
    if(n_6)skin.left=temp+"px";
  }


  // left
  if(parseInt(skin.left)<1)
  {
    overflow=parseInt(skin.left)-1;
    temp=parseInt(skin.left);
    temp-=overflow;
    if(nav || iex) skin.left=temp;
    if(n_6)skin.left=temp+"px";
  }
}


function popup(msg,bak)
{


  var content="<TABLE WIDTH='"+popwidth+"' BORDER='1' BORDERCOLOR="+bcolor+" CELLPADDING=2 CELLSPACING=0 "+"BGCOLOR="+bak+"><TD ALIGN='center'><FONT COLOR="+fcolor+" FACE="+fface+" SIZE='1'>"+msg+"</FONT></TD></TABLE>";


  if(old)
  {
    alert(msg);
    return;
  } 

  yyy=Yoffset; 
  skin.width=popwidth;


  if(nav)
  { 
    skin.document.open();
    skin.document.write(content);
    skin.document.close();
    skin.visibility="visible";
  }


  if(iex)
  {        
    pup.innerHTML=content;
    skin.visibility="visible";
  }  


  if(n_6)
  {   
    document.getElementById("pup").innerHTML=content;
    skin.visibility="visible";
  }
}




function kill()
{
  if(!old)
  {
    yyy=-1000;
    skin.visibility="hidden";
    skin.width=0;
  }
}


</script>




</head>
<body>


[img]test.jpg[/img]


<map name="test">
    <area shape="rect" coords="11,10,59,29" href="#" alt="test" onmouseover="popup('texte','#9CB793')" onmouseout="kill()" target="_blank">
</map>


</body>
</html>

Alles anzeigen

Ronald

Ohje, er wollte doch nur ein einfaches Wort einblenden....

Jan2: setze einfach einen Title-Tag mit in den Area-Tag:

Code

<area shape="rect" coords="1,2,3,4" title="dein Text hier">

G.a.d.M.

Ronald

Jan2

Danke!

Und wie kann man diesen Text über mehrere Zeilen hinweg anzeigen lassen?

Beispiel: ...title="Max Meier"
"Student" klappt ja nicht.

Ronald

Das geht mit Title-Tags nicht, dafür brauchst du dann ein Javascript.
Allerdings geht das einfacher, als komplizierte Teil von xXx_BaSStar_xXx, schau mal hier, ein Beispiel von mir: http://web306.server3.webplus24.de/testseiten/tooltips/

Schau dir den Quelltext an, vielleicht verstehst du ihn schon so, sonst frag nach.

G.a.d.M.

Ronald