Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Bilderlinks mit hover erst mit hover sichtbar
#11
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.

Zitieren
#12
Da muss ich dann mkal rumfragen, wenn meine Test Phase vorbei ist und ich das Forum wieder freigebe.
Keinen Support per PN, eMail und Messenger
computerhartware.de
GIGA - Spielen geht immer!
Zitieren
#13
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

Zitieren
#14
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
Keinen Support per PN, eMail und Messenger
computerhartware.de
GIGA - Spielen geht immer!
Zitieren
#15
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?

Zitieren
#16
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.
Keinen Support per PN, eMail und Messenger
computerhartware.de
GIGA - Spielen geht immer!
Zitieren
#17
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.

Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  CSS class hover Theme auswahl lenox 7 2.722 19.02.2020, 21:45
Letzter Beitrag: StefanT
  Problem mit Hover Effekt SyntaX 3 1.679 17.10.2012, 10:01
Letzter Beitrag: SyntaX
  Oberes Menü (Suche, Help etc.) mit Hover Buttons versehen Laello 3 2.574 15.08.2008, 13:00
Letzter Beitrag: StefanT
  Tabellen Hover youfree 6 2.836 31.05.2008, 12:27
Letzter Beitrag: youfree
  Obere Navigation mit CSS-Hover im FiFo Gondlar 0 1.495 13.08.2007, 23:57
Letzter Beitrag: Gondlar