Bilder mit Sprechblasen - Website X5 Hilfe - Die Helpsite

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>