Bilder mit Sprechblasen - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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 selbst, alle anderen etwas aufwendigeren Einstellungen der Positionierung der Sprechblase und des Textes erfolgen im Stylesheet der Datei "style.css" .NoteObj65.. Classifizierung.
Die Darstellungsgröße auf der Homepage wird width='...' festgelegt, die Höhe ergibt sich automatisch im Verhältnis zur Originalgröße.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen, Bilddateien austauschen und im Code anpassen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Im ZIP-Paket enthalten sind die 3 dargestellten Sprechblasen als Imagedateien:
Download Button
x runter geladen
Sprechblasen:
Sprechblase 1
Sprechblase 2
Sprechblase 3
Foto Eberhard     Foto Heidi     Foto Magrid
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj65_0/style.css">
<script src="wsX5Obj/Obj65_0/bubble.js"></script>
Code für den <BODY> Bereich
<!-- Erstes Bild -->
<img src="wsX5Obj/Obj65_0/personen_01.jpg" width="250px" alt="Foto Eberhard"
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" alt="Foto Heidi"
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" alt="Foto Magrid"
onMouseover="anzeigen('textObj65_3');" onMouseOut="anzeigen('textObj65_3');">
<span class="BereichObj65" style="display: none;" id="textObj65_3">
<div class="NoteObj65_3">
Feierabend!
</div>
</span>
Code Datei "style.css"
.BereichObj65 { position: absolute; }
.NoteObj65_1 {
color: #000;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
letter-spacing: 0em;
background-image: url(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(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(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;
}
Feedbacks zu ""
Es gibt noch keine Rezension.
0
0
0
0
0

Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2022

Hosting by
Zurück zum Seiteninhalt