Bilder sichtbar machen

[Wolke09]

hallöchen,

ich bin dabei, mir eine homepage zu gestalten und brauche mal bitte eure hilfe.
ich sammle autogrammkarten und habe eine liste mit geschriebenen und erhaltenen autogrammen.

http://autogramm-karten-sammlung.npage.de/

nun möchte ich, daß beim berühren des namens mit dem mausanzeiger die autogrammkarte sichtbar wird.

ich schaffe es bisher nur, daß beim anklicken des namens eine neue seite mit der autogrammkarte aufgeht.

kann mit jemand sagen, was ich falsch mache ???

vielen dank schon mal für eure mühe.

marion

[bolivien]

Ich glaube, so etwas kam schon mal vor.

Du könntest das Tooltip-JavaScript von W.Zorn benutzen. Das findest du hier
Tooltips per JavaScript / DHTML

[Wolke09]

vielen dank für deine schnelle antwort ... das ist mir aber zu kompliziert

ich benutze den editor2 zum erstellen meiner homepageseiten und habe leider null ahnung von html.

kann ich das nicht ganz einfach über den dort vorgegebenen "link einfügen/bearbeiten" dort eingeben ?

da ist doch auch bei "ereignisse" eine spalte für onmouseover vorgesehen.

wenn mir jemand einen tip geben kann, wie ich das mit dem editor2 machen kann, bitte bitte melden.

marion

[HTML-Laie]

Hier noch mal ein Tooltip.

Öffne deine entsprechende Seite mit dem Editor 2. Dann oben links auf HTML klicken. Dann fügst du folgendes oben an erster Stelle ein:

<style type="text/css">
.tooltip {
    position: absolute;
    display: none;
    background-color: #E4E4E4;
}
strong {
    font-weight: bold;
}
</style>
<script type="text/javascript">
<!--
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
  if (wmtt != null && wmtt.style.display == 'block') {
    x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
    y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
    wmtt.style.left = (x + 20) + "px";
    wmtt.style.top   = (y + 20) + "px";
  }
}
function showWMTT(id) {
  wmtt = document.getElementById(id);
  wmtt.style.display = "block";
}
function hideWMTT() {
  wmtt.style.display = "none";
}
-->
</script>

Dann suche im Quelltext weiter unten nach dieser Stelle (blau markiert):

<TD><FONT size=3><A onmouseover='<img src="http://file2.npage.de/011517/98/bilder/adorf.jpg" alt="">' href="http://file2.npage.de/011517/98/bilder/adorf.jpg" target=_blank>Adorf, Mario</A></FONT></TD>

ersetze diesen dann durch folgenden Code, hierbei bitte beachten:
Die Bild-Url mußt du noch anpassen (rot markiert):

<div id="2" class="tooltip"><img src="http://file1.npage.de/00xxxx/xx/bilder/xxx1.jpg" alt=""></div>
<a onmouseover="showWMTT('2')" onmouseout="hideWMTT()" href="#"> Adorf, Mario</a>

Für jeden weiteren Namen mußt du :

div id="2"  und showWMTT('2')

erhöhen bzw. ändern, das heißt für den Namen Pasquale Aleardi würde es dann so aussehen:

<div id="3" class="tooltip"><img src="http://file1.npage.de/00xxxx/xx/bilder/xxx1.jpg" alt=""></div>
<a onmouseover="showWMTT('3')" onmouseout="hideWMTT()" href="#"> Aleardi, Pasquale</a>

MfG
Hape

[Wolke09]

hallo hape,
vielen dank für deine mühe, ist super nett von dir, das du dir die zeit genommen hast.
leider bin ich dazu zu dümmlich ... habe alles so gemacht, wie du es mir aufgeschrieben hast und habe nun ein totales chaos.

ich finde nicht mal mehr onmouseover in der html liste.

dann muss ich halt eine andere form von listen machen, wo ich die autogrammkarten direkt zeigen kann.

nochmals vielen dank .... gruß marion

[HTML-Laie]

leider bin ich dazu zu dümmlich ...

Keiner ist dazu zu dumm. Es klappt eben nicht alles auf Anhieb. Habe nochmals weitergesucht und noch einen Tooltip ausgegraben.

Aber zuerst erstellst du eine neue Seite und nennst sie z. B. Testseite. Öffne sie im HTML-Modus und kopiere folgendes an die erste Stelle:

<style type="text/css">
<!--
 body {background-color: #cccccc}
 a {text-decoration: none}
 a:hover {color: #FFCC66; background-color:#6E0509;}
 a:hover span {display: block; position: absolute; top: 85px; left:400px; }
 a span {display: none;}
 img {border: 1px solid navy; padding: 3px}
//-->
</style>

Dann fügst du folgenden Code ein (dies ist der Quelltext deiner Film-Seite) ein:

<p style="TEXT-ALIGN: center"><br></p>
<p style="TEXT-ALIGN: center">
<table style="BACKGROUND-COLOR: #529685; HEIGHT: 30px" border="2" height="30" width="300">
<tbody>
<tr>
<td scope="" align="center" lang="" valign="middle"><b><i><font face="times new roman,times" size="6">&nbsp;Film </font></i></b></td></tr></tbody></table></p>

<p style="TEXT-ALIGN: center">
<table border="1" height="892" width="935">
<tbody>
<tr>
<td style="WIDTH: 200px; HEIGHT: 10px" scope="" lang="" valign="top"><i><font size="3"><u><b>Name</b></u></font></i></td>
<td style="WIDTH: 500px; HEIGHT: 10px" scope="" lang="" valign="top"><i><font size="3"><u><b>Autogrammadresse</b></u></font></i></td>
<td style="WIDTH: 100px; HEIGHT: 10px" scope="" lang="" valign="top"><i><font size="3"><u><b>geschrieben</b></u></font></i></td>
<td style="WIDTH: 100px; HEIGHT: 10px" scope="" lang="" valign="top"><i><font size="3"><u><b>erhalten</b></u></font></i></td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>A</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Abt, Katharina</font></td>
<td><font size="3">Agentur Alexander, Lamontstr. 9, 81679 München</font></td>
<td><font size="3">18.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3"><a href="#">Adorf, Mario<span><img src="http://file2.npage.de/011517/98/bilder/adorf.jpg"></span></a></font></td>
<td><font size="3">Agentur Lentz, Herzogstr. 66, 80803 München</font></td>
<td><font size="3">16.04.2012</font></td>
<td><font size="3">18.04.2012</font></td></tr>
<tr>
<td><font size="3">Aleardi, Pasquale</font></td>
<td><font size="3">Above the Line GmbH, Theresienstr. 31, 80333 München</font></td>
<td><font size="3">13.04.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">Ande, Michael</font></td>
<td><font size="3">Agentur Alexander, Lamontstr. 9, 81679 München</font></td>
<td><font size="3">18.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">Atalay, Erdogan</font></td>
<td><font size="3">Film Artists, Hauptstr. 7, 21514 Hornbek</font></td>
<td><font size="3">02.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">Atzorn, Robert</font></td>
<td><font size="3">Agentur Carola Studlar, Agnesstr. 47, 80798 München</font></td>
<td><font size="3">26.04.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>B</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Bach, Patrick</font></td>
<td><font size="3">Actors Connection, Kuckucksberg 9, 22952 Lütjensee</font></td>
<td><font size="3">18.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">Baum, Henning</font></td>
<td><font size="3">Agentur Carola Studlar, Agnesstr. 47, 80798 München</font></td>
<td><font size="3">18.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">Beck, Tom</font></td>
<td><font size="3">Agentur Heppeler, Steinstr. 54, 81667 München</font></td>
<td><font size="3">02.05.2012</font></td>
<td><font size="3">19.05.2012</font></td></tr>
<tr>
<td><font size="3">Bellmann, Dieter</font></td>
<td><font size="3">Saxonia Media GmbH, Altenburgerstr. 7, 04275 Leipzig</font></td>
<td><font size="3">19.04.2012</font></td>
<td><font size="3">24.05.2012</font></td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>F</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Fedder, Jan</font></td>
<td><font size="3">Studio Hamburg GmbH, Jenfelder Allee 80, 22039 Hamburg</font></td>
<td><font size="3">03.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>H</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Hörbiger, Mavie</font></td>
<td><font size="3">Agentur Scenario, Rambergstr. 5, 80799 München</font></td>
<td><font size="3">04.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>K</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Kling, Anja</font></td>
<td><font size="3">Agentur Kling, Amselweg 6, 14552 Michendorf</font></td>
<td><font size="3">18.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>S</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Scholze, Theresa</font></td>
<td><font size="3">Fitz+Skoglund Agents, Linienstr. 130, 10115 Berlin</font></td>
<td><font size="3">04.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>T</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Tschirner, Nora</font></td>
<td><font size="3">Agentur Magnet, Rosenthalerstr. 40-41, Hof IV-B, 10178 Berlin</font></td>
<td><font size="3">03.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>V</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Vogel, Jürgen</font></td>
<td><font size="3">Agentur Players, Sophienstr. 21, 10178 Berlin</font></td>
<td><font size="3">04.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3"><b>W</b></font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr>
<tr>
<td><font size="3">Wepper, Fritz</font></td>
<td><font size="3">Neue Deutsche Filmgesellschaft mbH, Kanalstr. 7, 85774 Unterföhring</font></td>
<td><font size="3">02.05.2012</font></td>
<td>.</td></tr>
<tr>
<td><font size="3">.</font></td>
<td>.</td>
<td>.</td>
<td>.</td></tr></tbody></table></p>

Habe das bei Mario Adorf schon mal geändert (rot markiert).

Wenn du weitere Autogrammkarten hinzufügen willst immer folgenden Code verwenden:

<a href="#">Name, Vorname<span><img src="Url zum Bild"></span></a>

und diesen dann bei dem jeweiligem Namen einfügen.

Das es funktioniert kann man hier sehen: http://hapes-javascript-demo-page.de...oltipbild.html

MfG
Hape

[Wolke09]

guten morgen hape,

es hat geklappt ... manno, ich könnte dich ja drücken.

vielen, vielen, vielen dank, du hast mir sehr geholfen.

nun habe ich noch ein kleines problem ...

die angezeigte autogrammkarte bleibt im oberen bereich der seite.

ich habe mal eine autogrammkarte bei "dieter bellmann" eingefügt und wenn ich auf den namen gehe, dann sehe ich die autogrammkarte nicht mehr, weil sie eben im oberen bereich hängt.

kann das irgendwie noch geändert werden .... z.b. das die autogrammkarte genau neben dem namen erscheint ?

liebe grüße ... marion

[HTML-Laie]

kann das irgendwie noch geändert werden .... z.b. das die autogrammkarte genau neben dem namen erscheint ?

Eine Möglichkeit wäre in der CSS-Anweisung diesen Wert (rot markiert) auf 300px oder größer zu ändern:

POSITION: absolute; DISPLAY: block; TOP: 85px; LEFT: 400px

Dann wäre aber wahrscheinlich bei der untersten Karte der gleiche Effekt.

Zweite Möglichkeit ist folgende. Setze den Wert:

position: absolute;

auf

POSITION: auto;

dann wird die Karte unterhalb des Namens angezeigt. Dabei verändert sich aber für die Zeit der Ansicht auch die Tabellenspalte auf die Größe der Karte.

MfG
Hape

[Wolke09]

nochmals vielen herzlichen dank für deine mühe ... dann kann ich ja jetzt richtig loslegen.