Bilder mit Sprechblasen - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Bilder mit Sprechblasen

Scripte > Bildobjekte
Eine Tooltip-Möglickeit mit MousOver
Sprechblasen als Tooltip gibt es schon lange. Hier ein Beispiel mit Bilddateien als Tooltip.
Die Anpassung des Textes in der Sprechblase erfolgt im HTML-Code, alle anderen etwas aufwendigeren Einstellungen der Positionierung der Sprechblase selbst und des Textes erfolgen im Style-Bereich in der .NoteObj65.. Classifizierung.
Ausnahmsweise kommen hier die Styleinformationen in den Body-Bereich zusammen mit dem JavaScript-Code.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und nur das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code  in den in den BODY-Bereich <body>.....</body> der ausführenden Seite an gewünschter Stelle einfügen, Bilddateien austauschen und im Code anpassen. Die Darstellungsgröße auf der Homepage wird width='...' festgelegt, die Höhe ergibt sich automatisch im Verhältnis zur Originalgröße. Im ZIP-Paket enthalten sind die 3 dargestellten Sprechblasen als Imagedateien:
Download Button
x runter geladen!
Sprechblasen:
Sprechblase 1
Sprechblase 2
Sprechblase 3
       
Code für den <BODY> Bereich
<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>
  .BereichObj65 {
      position: absolute;
  }
  .NoteObj65_1 {
      color: #000;
      font-size: 12px;
      font-family: tahoma;
      font-weight: bold;
      letter-spacing: 0em;
      background-image: url(wsX5Obj/Obj65_0/blase_1.gif);
      background-repeat: no-repeat;
      width: 120px;
      height: 100px;
      position: relative;
      top: 0px;
      left: -100px;
      display: block;
      padding-top: 15px;
      padding-left: 30px;
      padding-right: 1px;
  }
  .NoteObj65_2 {
      color: #FF6300;
      font-size: 14px;
      font-family: verdana, sans-serif;
      font-weight: bold;
      letter-spacing: 0em;
      background-image: url(wsX5Obj/Obj65_0/blase_2.gif);
      background-repeat: no-repeat;
      width: 171px;
      height: 110px;
      position: relative;
      top: 55px;
      left: -40px;
      display: block;
      padding-top: 20px;
      padding-left: 60px;
      padding-right: 5px;
   }
  .NoteObj65_3 {
      color: #FF0000;
      font-size: 12px;
      font-family: verdana, sans-serif;
      font-style: bold;
      letter-spacing: 0.3em;
      background-image: url(wsX5Obj/Obj65_0/blase_3.gif);
      background-repeat: no-repeat;
      width: 250px;
      height: 250px;
      position: relative;
      top: 30px;
      left: -130px;
      display: block;
      padding-top: 40px;
      padding-left: 38px;
      padding-right: 5px;
  }
</style>

<!-- Erstes Bild -->
<img src="wsX5Obj/Obj65_0/personen_01.jpg" width="250px"
onMouseover="anzeigen('textObj65_1');"  onMouseOut="anzeigen('textObj65_1');">
<span class="BereichObj65" style="display: none;" id="textObj65_1">
  <div class="NoteObj65_1">Ich bin Eberhard,<br>... und wie immer bei der Arbeit,<br>zumindest am Computer... :-)</div>
</span>
&nbsp; &nbsp;
<!-- Zweites Bild -->
<img src="wsX5Obj/Obj65_0/personen_02.jpg" width="250px"
onMouseover="anzeigen('textObj65_2');" onMouseOut="anzeigen('textObj65_2');">
<span class="BereichObj65" style="display: none;" id="textObj65_2">
  <div class="NoteObj65_2">I'm Heidi,<br>what do<br>you want...</div>
</span>
&nbsp; &nbsp;
<!-- Drittes Bild -->
<img src="wsX5Obj/Obj65_0/personen_03.jpg" width="250px"
onMouseover="anzeigen('textObj65_3');" onMouseOut="anzeigen('textObj65_3');">
<span class="BereichObj65" style="display: none;" id="textObj65_3">
  <div class="NoteObj65_3">Feierabend!</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.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 2 Online
» 528 Heute
» 469 Gestern
» 1763 Woche
» 5714 Monat
» 75535 Jahr
» 322113 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt