getElementById

bernd · Beitrag von **bernd** » So 25. Apr 2010, 21:12

Hallo,

ich zeige mit JavaScript / mouseover die Tagesverlaufkurfen einiger Sensoren beim überfahren des Textes an.
Hier das Script

Code: Alles auswählen

<script type="text/javascript"> 
function display(ID, FC) { 
 document.getElementById(ID).innerHTML='<img src="' + FC +'">'; 
} 

function display_aus(ID) { 
 document.getElementById(ID).innerHTML=''; 
} 
</script>

Hier ein Beispiel.

Code: Alles auswählen

<a ref="http://www.heimbach-eifel-wetter.de/data/mini_currentt.gif" onMouseOver="display('a1', 'http://www.heimbach-eifel-wetter.de/data/mini_currentt.gif');" onMouseOut="display_aus('a1');" > Temperatur 2 m </a><span id="a1" style="position: absolute; z-index: 99; margin-left: 10px;"></span>

Die Grafiken werden rechts unterhalb des Textes angezeigt.

Jetzt möchte ich aber eine Grafik rechts oberhalb des Textes anzeigen lassen, bekomme das aber einfach nicht hin. Kann mir jemand da einen Tipp geben?

Beitrag von **Michael** » Mo 26. Apr 2010, 06:58

z.B. margin-top: -280px; einfügen

Code: Alles auswählen

<span id="a1" style="position: absolute; z-index: 99; margin-top: -280px; margin-left: 10px;">

Sowas würde auch ohne Java Script gehen.

bernd · Beitrag von **bernd** » Mo 26. Apr 2010, 11:26

Hallo Michael,

danke für den Tipp, werde es gleich mal testen.

Aber wie würde sowas denn ohne Java Script gehen?
Dann hätte ich, und wenn andere Interesse drann haben, es vieleicht was einfacher.

-Edit- hatte ich ganz vergessen für jedes Bildchen was angezeigt werden soll muß id="a1" geändert werden.

Beitrag von **Michael** » Mo 26. Apr 2010, 12:14

bernd hat geschrieben:Aber wie würde sowas denn ohne Java Script gehen?

mit CSS

bernd hat geschrieben:Dann hätte ich, und wenn andere Interesse drann haben, es vieleicht was einfacher.

kommt darauf an ob einem CSS geläufig ist.

bernd · Beitrag von **bernd** » Mo 26. Apr 2010, 12:24

Hallo Michael,

bei mir nicht so richtig, habe schon mal Schriftart/größe in meiner geändert, sonst habe ich mich noch nicht wirklich damit beschäftigt.

Beitrag von **Michael** » Mo 26. Apr 2010, 13:32

bernd hat geschrieben:-Edit- hatte ich ganz vergessen für jedes Bildchen was angezeigt werden soll muß id="a1" geändert werden.

Sollte man nicht machen den eine ID sollte eigentlich nur einmal in einer Seite vorkommen.

bernd · Beitrag von **bernd** » Mo 26. Apr 2010, 14:21

Michael hat geschrieben: Sollte man nicht machen den eine ID sollte eigentlich nur einmal in einer Seite vorkommen.

Wenn ich die ID nur einmal verwende funtz es aber nicht.
Habe eben http://www.heimbach-eifel-wetter.de/rur ... wetter.php überarbeitet.
Wenn ich bein den unteren beiden Infopunkten die selbe ID lasse, werden trotz margin-top: -280px; die Grafiken nicht ganz angezeigt. Werde schnell mal eine von den beiden mit ID1 versehen damit man das sieht.

Beitrag von **Michael** » Mo 26. Apr 2010, 14:47

bernd hat geschrieben:Wenn ich die ID nur einmal verwende funtz es aber nicht.

Wenn man irgendwelche Scripte einsetzt sollte man schon wissen was man macht. [Klugscheiß]
Aber ich kann Dich beruhigen es funzt trotzdem. Jo Jo Jo
Du mußt deinem Scriptaufruf natürlich auch die richtige ID mitgeben.

Code: Alles auswählen

<a ref="http://www.heimbach-eifel-wetter.de/data/mini_currentt.gif" onMouseOver="display('gelldogugsch', 'http://www.heimbach-eifel-wetter.de/data/mini_currentt.gif');" onMouseOut="display_aus('gelldogugsch');" > Temperatur 2 m </a><span id="gelldogugsch" style="position: absolute; z-index: 99; margin-left: 10px;"></span>

Aber mal ehrlich so unter uns. Dein Code ist eine einzige Katastrophe, wo hast Du den diesen Schw...... her?

bernd hat geschrieben:Wenn ich bein den unteren beiden Infopunkten die selbe ID lasse, werden trotz margin-top: -280px; die Grafiken nicht ganz angezeigt. Werde schnell mal eine von den beiden mit ID1 versehen damit man das sieht.

Genau aus diesem Grund sollte die ID nur einmal verwendet werden. Heideneiaberau

bernd · Beitrag von **bernd** » Mo 26. Apr 2010, 18:56

Michael hat geschrieben:Aber mal ehrlich so unter uns. Dein Code ist eine einzige Katastrophe, wo hast Du den diesen Schw...... her?

Aus einem Forum für Webmaster.

Beitrag von **Michael** » Di 27. Apr 2010, 07:46

Hier mal eine etwas sauberere Methode als Beispiel

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Testseite javascript tooltip</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="" />
          <style type="text/css">
.cont_leer
{
    width: 300px;
    height: 300px;
    border: solid;
    border-color: #142E5D;
    border-width: medium;

}
.tooltip_haupt
{
  position: absolute;
  z-index: 99;
  margin-left: 10px;
  visibility: hidden;
}
a.tooltip_href
{
  cursor: help;
  color: #000000;
  text-decoration: none;
}
#a1
{
 margin-left: 30px;
}
#a2
{
  margin-left: 30px;
}
#a3
{
  margin-left: 30px;
}
#a4
{
  margin-left: 30px;
}
#a5
{
   border: solid;
   border-color: #142E5D;
   border-width: medium;
   margin-left: 30px;
   margin-top: -250px;
}
#a6
{
    margin-top: -280px;
    margin-left: 30px;
}

</style>
        <script language="javascript" type="text/javascript">
              function display(ID, FC) {
document.getElementById(ID).innerHTML='<img src="' + FC +'" alt="" />';
document.getElementById(ID).style.visibility="visible";


}

function display_aus(ID) {
document.getElementById(ID).innerHTML='';
document.getElementById(ID).style.visibility="hidden";
}
</script>
</head>

<body>
<div class="cont_leer">info1</div>
  <div align="left"><font face="Courier New"><font size="2">
<br/>Temperatur 2 Meter <a class="tooltip_href" onmouseout="display_aus('a1');" onmouseover="display('a1', 'graphics/mini_currentt.gif');" href="#anker"><img width="20" height="20" border="0" src="info.jpg" alt="info" /></a><span class="tooltip_haupt" id="a1"></span>
<br/>Luftdruck h/Pa <a onmouseout="display_aus('a2');" onmouseover="display('a2', 'graphics/mini_currentd.gif');" href="#anker"><img width="20" height="20" border="0" src="info.jpg" alt="info" /></a><span class="tooltip_haupt" id="a2"></span>
<br/>Luftfeuchte in % <a onmouseout="display_aus('a3');" onmouseover="display('a3', 'mini_currentf.gif');" href="#anker"><img width="20" height="20" border="0" src="info.jpg" alt="info" /></a><span class="tooltip_haupt" id="a3"></span>
<br/>Windgeschwindigkeit<a onmouseout="display_aus('a4');" onmouseover="display('a4', 'graphics/mini_currentw.gif');" href="#anker"><img width="20" height="20" border="0" src="info.jpg" alt="info" /></a><span class="tooltip_haupt" id="a4"></span>

<br/>Windrichtung <a onmouseout="display_aus('a5');" onmouseover="display('a5', 'ddis_current.gif');" href="#anker"><img width="20" height="20" border="0" src="info.jpg" alt="info" /></a><span class="tooltip_haupt" id="a5"></span>

<br/><a class="tooltip_href" onmouseout="display_aus('a6');" onmouseover="display('a6', 'graphics/windbft_current.gif');" href="#anker"> Windst&auml;rke</a><span class="tooltip_haupt" id="a6"></span>
</font></font></div>
<br /><br />
<a href="#anker">Ein normaler Link</a>
</body>
</html>

Bilder die auf dem eigenen Server liegen sollte man nicht mit http://www.deine_adresse.de/meinebilder/meinbild.jpg aufrufen sondern die absoluten oder relativen Pfadangaben verwenden.

Bei Fragen zum Beispiel einfach Fragen.

-Edit-
Hier noch ein Beispiel das zum Testen. Ich hab die Grafiken von Bernd dafür verwendet.( Ich hoffe Bernd Du bist mir darüber nicht böse

)

tooltip_orginal.zip

[( PHP_Wetter_Freunde )]

getElementById

getElementById

Re: getElementById

Re: getElementById

Re: getElementById

Re: getElementById

Re: getElementById

Re: getElementById

Re: getElementById

Re: getElementById

Re: getElementById