Bilder mit Sprechblasen - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Bilder mit Sprechblasen

Scripte > Bildobjekte


Eine weitere Tooltip-Möglickeit bei Mousover.

JavaScript

Diese JavaScript-Funktion zeigt Sprechblasen über Bilder an. Eventuell muß die CSS-Anweisung ".beschreibung" den Sprechblasen angepasst werden!

Image auf den Server in das Verzeichnis "images" kopieren.
Example:

demo_apfel.jpg demo_banane.jpg demo_ball.jpg



ausruf1.gif   ausruf2.gif    ausruf3.gif


Images mit Rechtsklick (Bild/Grafik speichern unter...) herunter laden.


Demo:

               


Code für das HTML-Objekt:

<script type="text/javascript">
function anzeigen(das){
if(document.getElementById(das).style.display=="none") {
 document.getElementById(das).style.display="inline";
}
else {
 document.getElementById(das).style.display="none";
}
}
</script>

<style type="text/css">
.bereich {
position: absolute;
}

.beschreibung1 {
color: #76835F;
background-image: url(images/ausruf1.gif);
background-repeat: no-repeat;
width: 171px;
height: 110px;
position: relative;
left: -20px;
display: block;
padding-top: 5px;
padding-left: 45px;
padding-right: 5px;
}
.beschreibung2 {
color: #76835F;
background-image: url(images/ausruf2.gif);
background-repeat: no-repeat;
width: 171px;
height: 110px;
position: relative;
left: -10px;
display: block;
padding-top: 5px;
padding-left: 55px;
padding-right: 5px;
}
.beschreibung3 {
color: #76835F;
background-image: url(images/ausruf3.gif);
background-repeat: no-repeat;
width: 250px;
height: 250px;
position: relative;
left: -5px;
display: block;
padding-top: 15px;
padding-left: 50px;
padding-right: 5px;
}
</style>

<!-- Erstes Bild -->
<img src="images/demo_apfel.gif" onMouseover="anzeigen('text1');"  onMouseOut="anzeigen('text1');">
<span class="bereich" style="display: none;" id="text1">
<div class="beschreibung1"><br>Ich bin<br>ein schöner<br>roter Apfel.</div>
</span>

&nbsp; &nbsp; &nbsp; &nbsp;

<!-- Zweites Bild -->
<img src="images/demo_banane.gif" onMouseover="anzeigen('text2');" onMouseOut="anzeigen('text2');">
<span class="bereich" style="display: none;" id="text2">
<div class="beschreibung2"><br>Das gelbe<br>krumme und<br>seltsame Ding.</div>
</span>

&nbsp; &nbsp; &nbsp; &nbsp;

<!-- Drittes Bild -->
<img src="images/demo_ball.gif" onMouseover="anzeigen('text3');" onMouseOut="anzeigen('text3');">
<span class="bereich" style="display: none;" id="text3">
<div class="beschreibung3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Was kann<br>man damit alles<br>schönes machen?</div>
</span>


Feedbacks zu ""

es gibt insgesamt 2 Kommentar(e)


  1. Daniel schreibt am 18.03.2014, 12.22 Uhr

    cool! wie kann man die größe der Sprechblase verändern? wenn man das zweite Beispiel nutzt und im css bereich die größe ändern will, dann geht diese einfach nach unten auf
    Admin-Antwort: Dem Script liegen 3 Imagedateien bei und die Sprechblasen sind diese Imagedateien. Im Bereich CSS wird die Breite und Höhe des Images mit
    width: 171px;
    height: 110px;
    bestimmt.
    Die Imagedateien selbst haben diese Größe.
    Möchte man die Größe ändern, muss man auch die Imagedateien dementsprechend größer gestalten.

  2. Henrik Schmitz schreibt am 30.07.2012, 14.16 Uhr

    Interessant! Kann man auch innerhalb eines Bildes verschiedene Motive mit verschiedenen Sprechblasen versehen und wie würde das funktionieren? LG Hnerik
    Admin-Antwort: Bitte solche Anfragen immer über das Kontaktformular. Das Kommentarmodul ist für Skripte nur bedingt geeignet.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 10 Online
 » 106 Heute
 » 1463 Woche
 » 5218 Monat
 » 31042 Jahr
 » 277620 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü