Bilderlinks mit hover erst mit hover sichtbar

Jan · 21.04.2007, 18:53

Bei mir werden sie geladen.
Aber benutzte lieber diesen Code:

Code:
<style>/* Buttons */

a.menu{

   background: url(deine_grafik.gif) no-repeat left top;

   width: 50px;

   height: 50px;

   text-decoration: none;

}

a.menu:hover{

   background-position: 0px -50px;

}

</style>

<div class="menu" >

<a href="index.php" class="menu">Home</a>

</div>

Das hat den vorteil, das das Bild schon vorher geladen wird. Sonst muss das bild erst geladen werden, wenn du mir der Maus über das Bild fährst. Sowas ist nicht schön. Stört, und lässt sich mit CSS ganz einfach umgehen.

Du musst nur deine beiden Bilder als ein Bild zusammenlegen, untereinander.
Näheres kannst du auch hier lesen.

modercol · 21.04.2007, 18:58

Da muss ich dann mkal rumfragen, wenn meine Test Phase vorbei ist und ich das Forum wieder freigebe.

Jan · 21.04.2007, 19:01

Hab meinen Post geändert, les ihn dir nochmal durch.
Diese Frage ist jetzt nicht böse gemeint, aber warum änderst du es nicht einfach in CSS? Was hindert dich daran? Ich wunder mich gerade, warum du nicht eine bessere Lösung annehmen möchtest? O_o

modercol · 30.06.2007, 21:08

gut, ich hab mich jetzt doch entschlossen CSS her zu nehmen.
Einmal auch wegen Validations Problemen.
Allerdings verwirrt mich deine Seite auch etwas Jan. Auch in dem Punkt, das meine Grafiken nicht untereinander sondern nebeneinander dargestellt werden sollen.
Ich bräuchte also einen Code mit <a href> und CSS, sodass die Grafiken nebeneinander dargestellt werden? Wink

Bei deinem oberen Beipsiel, sehe ich auch kein Code, der das hover-Bild einfügt. Rolleyes

Jan · 30.06.2007, 21:19

Bist leider nicht mehr in ICQ,

das Bild das ohne Hover angezeigt wird, und das Bild das mit Hover angezeigt werden solle, müssen in einem Bild sein. Also beide in einer datei. Untereinander.
Dann wird beim laden der Seite das gesamte Doppelbild geladen.
Und wenn du mit der Maus drüber fährst, wird das Bild automatisch um 50px nach unten gescrollt. Es ist dann der teil des Bildes zu sehen, der dein Hoverbild war.

Soweit verstanden?

modercol · 30.06.2007, 21:59

Wusst ichs doch: Da erscheint kein Bild bzw. des is zu klein trotz genauer CSS-Angabe. Mal die CSS:

Code:
a.home{

   background:url(images/but111.png) no-repeat left top;

   width:60px;

   height:80px;

   text-decoration: none;

}

a.home:hover{

   background-position: 0px -40px;

}

Jetzt des XHTML dazu:

PHP-Code:
<div style="margin-top:120px; margin-left:45px; padding:0px; ">
<a href="index.php" class="home">&nbsp;</a>
...
</div> 

Jan du weißt ja die URL.

Jan · 30.06.2007, 22:59

Ersetzte:

Code:
</head>

<body>

<div class="head">

<a href="http://www.x-jokepage.de.vu" title="Jokes,Jokes,witze... x-jokepage.de.vu" class="linktop">x-jokepage</a><!-- | <a href="http://www.casemod.de.gg" title="Tipps und Fotos für casemoder" class="linktop">casemod</a> -->

<div style="position:absolute; top:5px; left:880px; z-index:0; ">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="120">

<param name="movie" value="Analog_Uhr_VS_04.swf" />

<param name="quality" value="high" />

<param name="BGCOLOR" value="#ffba5e" />

<param name="MENU" value="false" />

</object>

</div>

<div style="margin-top:120px; margin-left:45px; padding:0px; ">

<a href="index.php" class="home"> </a>

durch:

Code:
<style>

#homelink, #homelink a {

   width:60px;

   height:40px;

   background:red url(images/but111.png)left top no-repeat;

   text-decoration: none;

    float:left;

}

#homelink a:hover{

   background-position: 0px -40px;

}

</style>

</head>

<body>

<div class="head">

<a href="http://www.x-jokepage.de.vu" title="Jokes,Jokes,witze... x-jokepage.de.vu" class="linktop">x-jokepage</a><!-- | <a href="http://www.casemod.de.gg" title="Tipps und Fotos für casemoder" class="linktop">casemod</a> -->

<div style="position:absolute; top:5px; left:880px; z-index:0; ">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="120">

<param name="movie" value="Analog_Uhr_VS_04.swf" />

<param name="quality" value="high" />

<param name="BGCOLOR" value="#ffba5e" />

<param name="MENU" value="false" />

</object>

</div>

<div style="margin-top:120px; margin-left:45px; padding:0px; ">

<div id="homelink">

    <a href="index.php"></a>

</div>

Die Funktionsweise sollte verstanden sein.
Musst nur jeden Button einzeln definieren.