Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag04.06.2007 um 11:29 (UTC)    
Titel: Sprechblase

brauche html-code, der ein bild (wie eine sprechblase) öffnet, wenn man auf ein wort fährt!
danke


Zuletzt bearbeitet von jungle am 05.06.2007, 12:56, insgesamt einmal bearbeitet
Beitrag04.06.2007 um 12:47 (UTC)    
Titel:

OK....ist ein bisschen kompliziert, lässt sich aber verwirklichen Wink (wenns klappt!!!)

Also als erstes mal der komplette Code! Nachher werde ich ihn noch erklären und sagen, wo was eingefügt werden muss!

Der komplette Code:
Zitat:

<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;
}

.beschreibung {
color: #76835F;
background-image: url(http://img.webme.com/pic/o/outcast-inventions/sprechblase.gif);
background-repeat: no-repeat;
width: 171px;
height: 110px;
position: relative;
left: -15px;
display: block;
padding-top: 5px;
padding-left: 25px;
padding-right: 5px;
}
</style>

<!-- Text mit Beschreibung -->
<a onMouseover="anzeigen('text');" onMouseOut="anzeigen('text');">Hier der Text
<span class="bereich" style="display: none;" id="text">
<div class="beschreibung">Hier kommt der Text zur Beschreibung rein</div>
</span></a>


Ja das ist der Code! Jetzt teilen wir ihn auf...

Der folgende Code muss in Text über dem Design eingefügt werden (Design einstellen->Box: Text über dem Design):

Zitat:

<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">
<!-- absolute Position für die Box -->
.bereich {
position: absolute;
}

<!-- Der Beschreibng-Tag -->
.beschreibung {
color: #76835F;
background-image: url(http://img.webme.com/pic/o/outcast-inventions/sprechblase.gif);
background-repeat: no-repeat;
width: 171px;
height: 110px;
position: relative;
left: -15px;
display: block;
padding-top: 5px;
padding-left: 25px;
padding-right: 5px;
}
</style>


Das ist ganz einfach ein Javascript, das regelt wann die Sprechblase geöffnet und wann sie geschlossen werden soll!
Der Css-Code ist für die Sprechblase da, um sie zu Positionieren und den Text, der in die Sprechblase soll, zu definieren (Farbe der Schrift, Hintergrundbild "Sprechblase", etc.)!

Der folgende Code muss dann auf der Seite eingefügt werden, auf der die Sprechblase sein soll:

Zitat:

<!-- Text mit Beschreibung -->
<a onMouseover="anzeigen('text');" onMouseOut="anzeigen('text');">Hier der Text
<span class="bereich" style="display: none;" id="text">
<div class="beschreibung">Hier kommt der Text zur Beschreibung rein</div>
</span></a>


So....das grün makierte ist so für dich nicht wichtig! Hier wird einfach nur eine "ID" vergeben, um das Anzeigen der Texte zu unterscheiden, etc.!
Wichtig für dich ist nur das rot und blau makierte!
Bei dem rot makierten kommt der Text (oder Wort) rein, der auf der Homepage-Seite stehen soll (Beispiel: Was bin ich?)!
Das blau makierte ist die Beschreibung in der Sprechblase (Beispiel: Ein Homepage-Baukasten-User!)...
Ja das war schon alles...ich hoffe es funktioniert Wink
______________
==> OutCast Inventions

Der DesignCreator für den PC ... in wenigen Minuten das eigene individuelle Iceblue-Design!
Beitrag05.06.2007 um 10:25 (UTC)    
Titel: denke

he fetten dank! hat prima funktioniert!
Beitrag05.06.2007 um 11:15 (UTC)    
Titel: Re: denke

jungle hat Folgendes geschrieben:
he fetten dank! hat prima funktioniert!


das freut mich....kein Problem Wink
Danke für die Rückmeldung...
______________
==> OutCast Inventions

Der DesignCreator für den PC ... in wenigen Minuten das eigene individuelle Iceblue-Design!
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de