Frage stellenAlso, ich wollte gerne wissen, wie man das macht, wie es auf dieser Homepage gemacht wurde, dass die Bilder sich vegrößern, wenn man drüber fährt: http://solitude.so.funpic.de/vonheimat/imperfekt/imperfekt/testsw.html
Kann mir da jemand helfen?
LG Zimtgruen
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
bild wird bei mousehover vergrößert
11 Beiträge • Seite 1 von 1
bild wird bei mousehover vergrößert
von Zimtgruen » 27.03.2005, 18:59
Auch wenn die Brücken brechen, bestehen die Ufer weiter!
-
Zimtgruen - neu hier
- Beiträge: 13
- Registriert: 27.03.2005, 18:53
- Wohnort: Nürnberg
von Shadowfax » 27.03.2005, 21:20
Das kann man sehr gut mit CSS lösen.
Das Prinzip ist einfach:
Man stellt in den Link von dem kleinen Bild das große Bild. Allerdings gibt man dem großen bild mittels <span class="irgendwas.. die Eigenschaft, dass es nicht angezeigt wird.
Beim Hover-Effekt stellt man dann einen absoluten Wert ein und positioniert es an die gewünschte Stelle, so dass es nur beim drüberfahren über den Link mit dem kleinen Bild erscheint.
Hab grad keine Zeit, aber morgen kann ich den dazugehörigen Code hier posten, dann ist es sicher leichter verständlich. Vielleicht versteht man es aber auch schon so. Mehr dazu morgen.
Das Prinzip ist einfach:
Man stellt in den Link von dem kleinen Bild das große Bild. Allerdings gibt man dem großen bild mittels <span class="irgendwas.. die Eigenschaft, dass es nicht angezeigt wird.
Beim Hover-Effekt stellt man dann einen absoluten Wert ein und positioniert es an die gewünschte Stelle, so dass es nur beim drüberfahren über den Link mit dem kleinen Bild erscheint.
Hab grad keine Zeit, aber morgen kann ich den dazugehörigen Code hier posten, dann ist es sicher leichter verständlich. Vielleicht versteht man es aber auch schon so. Mehr dazu morgen.
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~ Kalt sei Hand, Herz und Gebein,
Kalt der Schlaf unterm Stein:
Nimmer steh' vom Bette auf,
Eh' nicht endet der Sonn' und des Mondes Lauf,
Die Sterne zersplittern im schwarzen Wind,
Und fallen herab und liegen hier blind,
Bis der dunkle Herrscher hebt seine Hand
Über tote See und verdorrtes Land. ~
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
-
Shadowfax - Administrator
- Beiträge: 103
- Registriert: 27.12.2004, 18:45
- Wohnort: Beenhausen
von Zimtgruen » 27.03.2005, 23:57
noch ne frage, geht das auch mit text, also dass ich über einen Link fahr und dann daneben ein Text erscheint?
wenn, könnte ich dann vielleicht beide codes haben?
wenn, könnte ich dann vielleicht beide codes haben?
Auch wenn die Brücken brechen, bestehen die Ufer weiter!
-
Zimtgruen - neu hier
- Beiträge: 13
- Registriert: 27.03.2005, 18:53
- Wohnort: Nürnberg
von Shadowfax » 28.03.2005, 12:24
Das geht sowohl mit Text, als auch mit Bildern. Theoretisch kannst du damit auch ne ganze Seite verstecken und wieder erscheinen lassen, ist vollkommen egal.
Der Code:
In der HTML Datei:
CSS Datei:
Dann erscheint bei 162/147 der gewünschte Text oder das Bild. Das kann man nun natürlich beliebig verschieben.
Das müsste es auch schon gewesen sein.
Der Code:
In der HTML Datei:
- Code: Alles auswählen
<a href="ang.html" class="menu">Angebote<span class="r2">IRGENDEIN TEXT ODER BILD</span></a>
CSS Datei:
- Code: Alles auswählen
a .r2
{
display: none;
}
a:hover .r2
{
display: block;
position: absolute;
top: 162px;
left: 147px;
width: 79px;
height: 22px;
}
Dann erscheint bei 162/147 der gewünschte Text oder das Bild. Das kann man nun natürlich beliebig verschieben.
Das müsste es auch schon gewesen sein.
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~ Kalt sei Hand, Herz und Gebein,
Kalt der Schlaf unterm Stein:
Nimmer steh' vom Bette auf,
Eh' nicht endet der Sonn' und des Mondes Lauf,
Die Sterne zersplittern im schwarzen Wind,
Und fallen herab und liegen hier blind,
Bis der dunkle Herrscher hebt seine Hand
Über tote See und verdorrtes Land. ~
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
-
Shadowfax - Administrator
- Beiträge: 103
- Registriert: 27.12.2004, 18:45
- Wohnort: Beenhausen
von Zimtgruen » 28.03.2005, 13:20
hmm
irgendwie krieg ich das nich ganz hin (bin css-anfänger)
ich hab das jetzt so gemacht:
Was muss ich denn bei <a href="..." eingeben, wenn da z.B. Embrasser Giant erscheinen soll, wenn man über info.jpg fährt
irgendwie krieg ich das nich ganz hin (bin css-anfänger)
ich hab das jetzt so gemacht:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<STYLE TYPE="text/css">
<!--
A:link{ text-decoration: underline; color:#000000; }
A:visited{ text-decoration: underline; color:#000000; }
A:active{ text-decoration: underline; color:#000000; }
A:hover{ TEXT-DECORATION: none; color:#000000; }
-->
</style>
<style type="text/css">
<!--
a .r2
{
display: none;
}
a:hover .r2
{
display: block;
position: absolute;
top: 162px;
left: 147px;
width: 79px;
height: 22px;
}
-->
</style>
<body style="background-color:transparent; filter:chroma(color=#FFCC99)">
<STYLE type=text/css>
BODY {
font-family:"verdana",verdana,verdana;
scrollbar-base-color:;
scrollbar-3dlight-color:#FFCC99;
scrollbar-arrow-color:#000000;
scrollbar-darkshadow-color:#FFCC99;
scrollbar-face-color:#FFCC99;
scrollbar-highlight-color:#FFCC99;
scrollbar-shadow-color:#FFCC99;
scrollbar-track-color:;
}
</STYLE>
<font face="Verdana">
<font size="1">
<center>
<p align="center"><font face="Verdana" size="2"><b>Bildnachweis</b></font><p>
<font face="verdana" size="1">
Fahre mit der Maus über die
Info-Grafiken, dann siehst du, welche Fotos von wem sind.</font></p>
</center>
<a href="..." class="fotos"><img src="info.jpg" border="0"><span class="r2">Embrasser Giant</span></a>
</body>
</html>
Was muss ich denn bei <a href="..." eingeben, wenn da z.B. Embrasser Giant erscheinen soll, wenn man über info.jpg fährt
Auch wenn die Brücken brechen, bestehen die Ufer weiter!
-
Zimtgruen - neu hier
- Beiträge: 13
- Registriert: 27.03.2005, 18:53
- Wohnort: Nürnberg
von Shadowfax » 28.03.2005, 13:26
Abgesehen davon, dass ich den CSS Teil immer in eine externe Datei machen würde, stimmt doch alles.
Ich würde:
schreiben. Bei mir erscheint dann da auch Embrasser Giant beim Drüberfahren.
Ich würde:
- Code: Alles auswählen
<a href="#" class="fotos"><img src="info.jpg" border="0"><span class="r2">Embrasser Giant</span></a>
schreiben. Bei mir erscheint dann da auch Embrasser Giant beim Drüberfahren.
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~ Kalt sei Hand, Herz und Gebein,
Kalt der Schlaf unterm Stein:
Nimmer steh' vom Bette auf,
Eh' nicht endet der Sonn' und des Mondes Lauf,
Die Sterne zersplittern im schwarzen Wind,
Und fallen herab und liegen hier blind,
Bis der dunkle Herrscher hebt seine Hand
Über tote See und verdorrtes Land. ~
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
-
Shadowfax - Administrator
- Beiträge: 103
- Registriert: 27.12.2004, 18:45
- Wohnort: Beenhausen
von Zimtgruen » 28.03.2005, 13:33
bei mir nicht 
ich habs auch schon hochgeladen, aber es funktioniert nicht
http://home.arcor.de/silverqueen/bildnachweis.html
funktionierts bei dir?
ich habs auch schon hochgeladen, aber es funktioniert nicht
http://home.arcor.de/silverqueen/bildnachweis.html
funktionierts bei dir?
Auch wenn die Brücken brechen, bestehen die Ufer weiter!
-
Zimtgruen - neu hier
- Beiträge: 13
- Registriert: 27.03.2005, 18:53
- Wohnort: Nürnberg
von Shadowfax » 28.03.2005, 13:44
Ja, aber das liegt daran, dass ich Firefox benutze. Im IE geht´s nicht.
Du musst anstelle von
schreiben. Dann geht es auch im IE.
Du musst anstelle von
- Code: Alles auswählen
A:hover{ TEXT-DECORATION: none; color:#000000;}
- Code: Alles auswählen
A:hover{ TEXT-DECORATION: none; color:#000000; background: transparent; }
schreiben. Dann geht es auch im IE.
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~ Kalt sei Hand, Herz und Gebein,
Kalt der Schlaf unterm Stein:
Nimmer steh' vom Bette auf,
Eh' nicht endet der Sonn' und des Mondes Lauf,
Die Sterne zersplittern im schwarzen Wind,
Und fallen herab und liegen hier blind,
Bis der dunkle Herrscher hebt seine Hand
Über tote See und verdorrtes Land. ~
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
-
Shadowfax - Administrator
- Beiträge: 103
- Registriert: 27.12.2004, 18:45
- Wohnort: Beenhausen
von Shadowfax » 28.03.2005, 19:03
Was ist das eigentlich auf deinem Avatar? Ne faule Grapefruit? 
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~ Kalt sei Hand, Herz und Gebein,
Kalt der Schlaf unterm Stein:
Nimmer steh' vom Bette auf,
Eh' nicht endet der Sonn' und des Mondes Lauf,
Die Sterne zersplittern im schwarzen Wind,
Und fallen herab und liegen hier blind,
Bis der dunkle Herrscher hebt seine Hand
Über tote See und verdorrtes Land. ~
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
-
Shadowfax - Administrator
- Beiträge: 103
- Registriert: 27.12.2004, 18:45
- Wohnort: Beenhausen
11 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "bild wird bei mousehover vergrößert"
- Bild über den Rand hinaus
- Hintergrundbild ist entweder zur kurz oder zu lang
- 2 Hintergrundbilder im Contentbereich
- font-face: Schriftart wird vom IE(8) nicht erkannt
- die css stylsheet datei wird vom firefox falsch gelesen
- Div wird Umflossen obwohl nicht gewünscht
- Aüßere Divs werden nicht vergrößert
Zurück zu: CSS für Anfänger
Wer ist online?
Mitglieder in diesem Forum: Google [Bot] und 5 Gäste