✔ Roll over beim Textlink?

[Anny83]

Hi,

ich möchte gern auf meiner Website, dass sich ein kleines Fenster öffnet, wenn man über ein Wort fährt. Ist das im Dreamweaver möglich oder muss ich das mit Flash machen?

Kann mir jemand helfen?

Viele Grüße
Anny

 

[Maik]

Hi,

schau dir mal die Technik für CSS-Popups, wie z.B. http://www.brunildo.org/test/AutoAbsP.html, an.

mfg Maik

 

[Anny83]

Hi Maik,

danke für den Tipp, ist schon das wonach ich gesucht habe. Aber kann ich hier auch ein Bild einfügen? Ich möchte auf der Website die Namen der Mitarbeiter auflisten und wenn man drüber fährt soll sich dann das Bild der Person öffen. Meinst kannst mir da mal ein Beispielcode schicken

Danke lg Anny

 

[tamtam]

Hi!
Ich würde das mit Javascript machen da du dann im nachhinein viel leichter zusätzliche features einbauen kannst.

<script type="text/javascript">
function ShowPicture (ID) {
	if (ID.style.display == "none") {
		ID.style.display = "";
	} else {
		ID.style.display = "none";
	}
}
</script>

<style type="text/css">
.popup {
	position:absolute;
	width:150px;
	left:100px;
	background-color:#666;
	color:#FFF;
	border:1px solid red;
}
</style>


<a href="./mueller1.html" onmouseover="ShowPicture(mueller1)" onmouseout="ShowPicture(mueller1)">Herr Dieter Müller</a>
<div id="mueller1" style="display:none" class="popup">Hier ist ein Text und ein bild von/über dieter:<br> <img src="./mueller1.jpg" alt=""></div>
<br><br><br>
<a href="./mueller2.html" onmouseover="ShowPicture(mueller2)" onmouseout="ShowPicture(mueller2)">Herr Hans Müller</a>
<div id="mueller2" style="display:none;" class="popup">Hier ist ein Text und ein bild über/von hans:<br> <img src="./mueller2.jpg" alt=""></div>
<br><br><br>
<a href="./meier.html" onmouseover="ShowPicture(meier)" onmouseout="ShowPicture(meier)">Frau Ingrid Meier</a>
<div id="meier" style="display:none;" class="popup">Hier ist ein Text und ein bild von frau meier:<br> <img src="./meier.jpg" alt=""></div>

 

[Maik]

Hi,

selbstverständlich lassen sich in dem "CSS-Popup" auch Grafiken einbinden, hierfür muss einfach in dem span-Element der Text durch ein Grafikelement ersetzt werden:

<a class="rtr" href="#">
                <span class="intp">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                </span>
                <span class="apop"><span>
                       <img src="..." alt="...">
                </span></span>
        </a>

mfg Maik

 

[Anny83]

HI Maik,

habe den Code gerade eingegeben, muss ich auch noch was in die CSS Datei eintragen?
Sorry, aber ich habe da nicht so den Durchblick... Weil momentan funktioniert es nicht.
Muss das "rtr", intp" und das "apop" bei class dann so stehen bleiben?

Lg Anny

 

[Maik]

Eigentlich müsste im CSS-Code nichts verändert werden.

Wie lautet denn dein Quellcode (HTML + CSS)?

mfg Maik

 

[Anny83]

Habe den Code einfach so rein kopiert und dann den Link für das Bild etc geändert.

<a class="rtr" href="#">
<span class="intp">
Martina M&ouml;hringer
</span>
<span class="apop"><span>
<img src="../Bilder/Agentur/Team/Martina.jpg" alt="Martina">
</span></span>
</a>

Wenn man über den Namen "Martina Möhringer" fährt, sollte sich links ein kleines Bild von ihr öffnen. In der CSS Datei habe ich noch nichts geändert, das ist wahrscheinlich auch das Problem oder?
Momentan zeigt es das Bild nämlich gleich an...

 

[Maik]

Bei mir funktioniert dein Quellcode im Referenz-Beispiel (http://www.brunildo.org/test/AutoAbsP.html) tadellos, sprich das Bild wird erst beim Überfahren des Links angezeigt.

mfg Maik

 

[Maik]

Kann es sein, dass du diese Regel nicht übernommen hast?

.apop, .bpop {
        display: none;
}

Das würde nämlich erklären, weshalb bei dir das Bild direkt angezeigt wird.

mfg Maik