Bilder mit Sprechblasen - Website X5 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 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
Downloads:
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 ""

Henrik Schmitz

30.07.2012, 12:16

+0 -0  

Interessant! Kann man auch innerhalb eines Bildes verschiedene Motive mit verschiedenen Sprechblasen versehen und wie würde das funktionieren?
LG Henerik


*** ADMIN ANTWORT ***
Bitte solche Anfragen immer über das Kontaktformular. Das Kommentarmodul ist für
Skripte nur bedingt geeignet.


Daniel Danjers

18.03.2014, 11:22

+0 -0  

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.


Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


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

            © 2009 - 2020




            
            Besucher Statistik
            » 3 Online
            » 63 Heute
            » 276 Gestern
            » 63 Woche
            » 8829 Monat
            » 42108 Jahr
            » 512776 Gesamt
            Record: 1679 (15.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt