✔ Mittels CSS Bild erscheinen lassen, bei Hover über Textfeld.

Status
Nicht offen für weitere Antworten.
C

cssanfängel

Grünschnabel
Ich habe folgendes Problem ich möchte das diese Anwendung im aktuellen IE sowie auch im Mozilla und Opera funktioniert.

Ich möchte das der Besucher meiner Webseite auf den Link ( Deutsch ) klickt und oben links der Stern ( Css hover Bild ) aktiviert wird. Mittels JS wird es wohl ehr realisierbar sein.
Ich habe bereits unter Pseudoklassen geschaut konnte aber keine Anwendung finden die auch im IE funktioniert.

Wäre schön wenn mir jemand Tips geben könnte.

Hier ist der link zu der seite. http://www.blende8.mynetcologne.de/
 
Das ganze ist relativ einfach zu lösen.

Ich hoffe du bist des Englischen mächtig.

Ein schönes und einfach verständliches Tutorial findes du hier
oder hier


Wenn du dich noch nicht so mit Css auskennst empfehle ich dir dich mal auf meiner Seite umzusehen. Dort unter Links findest du eine Rubrik zu Css. Hat mir selbst auch sehr weitergeholfen mal was drüber zu lesen. Nur Code kopieren bringts auf dauer nicht.
hier der Link zu meiner Seite

mfg
Dark
 
Zuletzt bearbeitet:
:( Wääääh es will nicht.

Ich will das der Link Deutsch das kleine Bildchen ansteuert und zwar soll das Bild innerhalb seines Fensters verschoben werden also kein Bildaustausch.
Leider muß ich die Koordinaten für das Bild in der abhängigkeit des Links setzen also nicht vn den Außenkanten ?
Der MOuse hover background-position: top - 50;
bewirkt gar nichts das Bild klemmt fest.
Irgendwo ist dort der hund begraben.
Ich denke es gibt evtl probs mit der unter id="showcase welches im Grundgerüst eine class war, mit der ich aber kein Bild in die Seite bekam ;(-.



#navi {
position: absolute;
top: 284.25pt; left: 562.5pt;
}
#navi a {
width: 46.5pt; height: 12.75pt;
text-decoration: none;
color:#333333;
font-size:8pt;
text-align:center;
font-family:Verdana, sans-serif; }
#navi a:link {
color:#000000;
background: #bbbbbb;
}

#navi a:hover {
position: absolute;
width: 46.5pt; height: 12.75pt;
color:red;
background: #ffffff;
border:1px solid #000000;
font-size:8pt;
text-align:center;
font-family:Verdana, sans-serif; }
}
#navi a:active {
position: absolute;
width: 46.5pt; height: 12.75pt;
color:#ffffff;
background:red;
border:1px solid #000000;
font-size:8pt;
text-align:center;
font-family:Verdana, sans-serif; }
}
#navi a #showcase {
position: absolute;
top: -132.75pt; left: -185.25pt;
display:block;
width:128pt ; height:60pt ;
padding:0pt 0 0pt 0pt;
background: url(farbenstern.jpg) top left no-repeat;
text-decoration: none;

}

#navi a:hover #showcase {
position: absolute;
background-position: top: +160.75pt;
text-decoration: none;

}


-->

</style>

<div id="Text">
<p>English</p>
</div> <div id="menu">
<div id="navi"> <a href="#">Deutsch<span id="showcase"></span>
<!--navi-->
</div></a>
<!--menu--></div>
</body>
</html>
 
Deine Vermutung ist richtig: Statt des span-Tags musst du in den Link das Bild (img-Tag, nicht als Hintergrund) einfügen.
Sieh dir bitte mal diese Seite an: Pure CSS Popups 2.

Deine Problembeschreibung ist ziemlich verwirrend. Ich hoffe, dass ich dein Problem richtig verstanden habe:
Wenn du die Grafik mit dem hover-Effekt (also beim Überfahren des Links mit dem Cursor) verschieben willst, dann bezieht sich die Position wegen der absoluten Positionierung des IMG-Elements auf das Elternelement, in dem diese Grafik und auch der Link untergebracht ist.
Wenn du aber auf den Link klicken willst um irgendwelche Aktionen auszulösen ...
... auf den Link ( Deutsch ) klickt und oben links der Stern ...
Zum Vergrößern anklicken....
..., dann wirst du ohne JavaScript sicherlich nicht auskommen.
 
Hela hat recht, der Link den er geschrieben hat und den ich dir auch schon gepostet habe müsste was für dich sein.
Schau dir mal da den Quelltext an. Die Teile:
CSS
Code: 
div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}
HTML
Code: 
<div id="links">
<a href="http://www.meyerweb.com/">Home<img src="home.gif"></a>
<a href="http://www.meyerweb.com/eric/css/">Links<img src="links.gif"></a>
<a href="http://www.w3.org/">Away<img src="away.gif"></a>

<a href="http://www.meyerweb.com/eric/">Eric<img src="eric.gif"></a>
<a href="http://www.meyerweb.com/kat/">Kat<img src="kat.gif"></a>
<a href="http://www.meyerweb.com/other/">Other<img src="other.gif"></a>
</div>

wenn du nun z.B.:
Code: 
div#links a img {position: absolute; top: 50px; left: 55px; height: 50px; width: 50px;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

das müsste funktionieren.

habs noch nicht ausprobiert.

meld dich wenns geht
 
Vielen vielen Dank erstmal für eure schnelle Hilfe, ich habe mich grade mit dem
unten aufgeführten CSS versucht, wenn ich ein Bild einsetze dann bleibt es immer beständig dort also kein Bildwechsel.

Ich kenne es nur mit background bildern die ich in einer Maske verschiebe oder wechsel.

Diese sind dann auch im CSS als background-image angegeben.


Ich möchte einen Popup also ähnlich wie hier

http://www.blende8.mynetcologne.de/test.htm

Es sollte aber ein Hintergrundbild sein welches sich hinter einer Maske verschieben läßt.

So wie hier der Stern http://www.blende8.mynetcologne.de/ der aus 3 Bildern besteht.


Grüße Thomas



<style>
div#links a img {position: absolute; top: 300px; left: 55px; height: 50px; width: 50px;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}
</style>
</head>

<body>

<div id="links">
<a href="http://www.meyerweb.com/">Home<img src="home.gif"></a>
<a href="http://www.meyerweb.com/eric/css/">Links<img src="links.gif"></a>
<a href="http://www.w3.org/">Away<img src="away.gif"></a>

<a href="http://www.meyerweb.com/eric/">Eric<img src="eric.gif"></a>
<a href="http://www.meyerweb.com/kat/">Kat<img src="kat.gif"></a>
<a href="http://www.meyerweb.com/other/">Other<img src="other.gif"></a>
</div>

</body>
 
Bildwechsel? Maske?
Moment mal, da fällt mir doch was ein..... (kurz such..)

schau bitte mal hier

Da ist die Sache mit dem Bilder verschieben schön dargestellt

mfg

Dark

ps: mir ist zwar noch nicht ganz klar was du willst aber wir finden auch für dich das passende :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück