Bilder mit Sprechblasen - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Website hundertprozent CO2 neutral mit Host Europe
Newsletter anmelden
Direkt zum Seiteninhalt
Scan QR or Download Android App

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 ""
4 Kommentare
Durchschnittliche Bewertung: 145.0/5


Admin-Antwort
2018-11-13 07:57:52
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 Grröße. Möchte man die Größe ändern, muss man auch die Imagedateien dementsprechend größer gestalten.
Daniel
2018-11-13 07:54:28
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
2018-11-13 07:52:21
Bitte solche Anfragen immer über das Kontaktformular. Das Kommentarmodul ist für Skripte nur bedingt geeignet.
Henrik Schmitz
2018-11-13 07:51:16
Interessant! Kann man auch innerhalb eines Bildes verschiedene Motive mit verschiedenen Sprechblasen versehen und wie würde das funktionieren? LG Henrik
Vielen Dank für Dein Feedback.
Logo HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 447 Heute
» 552 Gestern
» 1508 Woche
» 8740 Monat
» 63283 Jahr
» 309861 Gesamt
Record: 1420 (10.04.2014)
Zurück zum Seiteninhalt