| Autor |
Nachricht |
-
bloodymx
|
 11.01.2010 um 15:18 (UTC)
Titel: Bildhover verlinken und Platzieren ?! |
|
|
Hi
Ich würde gerne ein verlinktes Bild mit Hovereffekt irgendwo auf der Seite Platzieren.
Ohne hover hab ich das :
(Über dem Design)
Code:
<div id="Extramenu"><a href="http://bloodymx.de.tl/Kapitel.htm"><img border="0" src="http://img.webme.com/pic/b/bloodymx/lesenklein.jpg" alt="" /></a></div>
CSS Code
Code:
#Extramenu
{
position:absolute;
top: 142px;
left:45%;
z-index: 5;
}
Was muss ich da jetzt Wo ändern damit ich da nen Hover Effekt hab,
Also n Bild als Hover.
Hoffe das mir da jemand helfen kann =) |
|
|
↑
|
|
 |
-
riki-designs
|
11.01.2010 um 15:52 (UTC)
Titel: |
|
|
Hi,
soll das Bild dann ein Link darstellen?
In diesem Fall könntest du das wie folgt lösen.
Zitat: a.deinTitel {
display:block;
width:200px;
height:33px;
background:transparent url(GRAFIK-URL) no-repeat bottom right;
}
a.deinTitel:hover {
display:block;
width:200px;
height:33px;
background:transparent url(GRAFIK-URL) no-repeat bottom right;
}
Das Bild kannst du dann im HTML folgend verstauen.
Zitat: <a class="deinTitel" href="URL, zu der verlinkt wird"></a>
Die Angaben musst du natürlich noch ergänzen, bzw. korrigieren.
--------
Möchtest du jedoch ein Bild ohne Link, dann brauchst du folgendes.
Wir werden nicht wirklich den hover Effekt vorladen sondern packen ihn einfach mit dem "normalen" Image in ein Bild.
Positioniert beide Bilder nebeneinander. Quelle
http://standards.webmasterpro.de/index-article-Grafischer%20Hover%20Effekt%20ohne%20Nachladen.html hat Folgendes geschrieben:
.hover {
text-decoration: none;
border:0;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 100px;
height:24px;
background: url("Bilder/button1.jpg") 0 0 no-repeat;
}
.hover:hover {
background-position: -100px 0;
}
Das Bild kannst du dann im HTML folgend verstauen.
http://standards.webmasterpro.de/index-article-Grafischer%20Hover%20Effekt%20ohne%20Nachladen.html hat Folgendes geschrieben: <a href="#" class="hover">Ich bin ein Text</a>
Gruss
Riki |
|
|
↑
|
|
|
-
bloodymx
|
11.01.2010 um 16:33 (UTC)
Titel: |
|
|
ah danke also der Code funktioniert (teilweise ...) also er funktioniert auf meiner sehr einfach gestrickten testseite... allerdings auf der Seite wo er hin soll wird gar nichts angezeigt kein Bild kein gar nichts ...
Bei meinem alten Code war ein ähnliches Problem , da war das ganze hinter dem Hintergrundbild , ist es jetzt schätzungsweise auch wieder hab da auch mal nen z-index eingebaut (weiß nicht ob das was bringt bei alten code hats geholfen) jedenfalls bringt es hier nichts.
hab auch nicht sooo viel ahnung von css ect. ... also immoment sieht es so aus:
Code:
a.hallo {
display:block;
width:200px;
height:33px;
z-index: 8;
background:transparent url(http://img.webme.com/pic/b/bloodymx/lesenklein.jpg) no-repeat bottom right;
}
a.hallo:hover {
display:block;
width:200px;
height:33px;
z-index: 8;
background:transparent url(http://img.webme.com/pic/b/bloodymx/lesenkleinhover.jpg) no-repeat bottom right;
}
______________  |
|
|
↑
|
|
|
-
riki-designs
|
11.01.2010 um 17:05 (UTC)
Titel: |
|
|
Ich hab das Ganze mal getestet, so wie du das hier postet, geht das bei mir.
Siehe hier
CSS Code ohne Style Tags:
Zitat: a.hallo {
display:block;
width:200px;
height:33px;
z-index: 8;
background:transparent url(http://img.webme.com/pic/b/bloodymx/lesenklein.jpg) no-repeat bottom right;
}
a.hallo:hover {
display:block;
width:200px;
height:33px;
z-index: 8;
background:transparent url(http://img.webme.com/pic/b/bloodymx/lesenkleinhover.jpg) no-repeat bottom right;
}
Im Quelltext
Zitat: <a class="hallo" href="#"></a>
Gruss
Riki |
|
|
↑
|
|
|
-
bloodymx
|
11.01.2010 um 17:52 (UTC)
Titel: |
|
|
mmm ja auf meiner Testhomepage hat es ja auch geklappt ... aber auf dieser hier nicht ... und leider klappt es immer noch nicht =(
http://bloodymx.de.tl/home.htm
schau dir das ganze einfach mal im Quelltext an. ______________ |
|
|
↑
|
|
|
-
bloodymx
|
12.01.2010 um 16:43 (UTC)
Titel: |
|
|
weiß den da auch sonst keiner weiter ?! ______________ |
|
|
↑
|
|
|
-
age-company
|
12.01.2010 um 22:24 (UTC)
Titel: |
|
|
Hey ich bin mir nicht sicher aber es könnte dran liegen das es im Hintergrund ist.
Schreibe einfach mal bei jedem Code das hinzu unten (CSS Codes)
Hoffe es klappt!!! ______________ 
!!!Vom Designen bis zum Coden.Wir Designen deine Homepage. Kostenlos!!! |
|
|
↑
|
|
|
-
bloodymx
|
13.01.2010 um 06:21 (UTC)
Titel: |
|
|
hmm nein klappt leider auch nicht ______________
Zuletzt bearbeitet von bloodymx am 13.01.2010, 07:21, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
beatbase
|
16.10.2010 um 08:27 (UTC)
Titel: |
|
|
Habe das hier:
<a href="ZIELADRESSE.DE"><img src="BILDADRESSE.PNG" onmouseover="this.src = 'BILADRESSE_2.PNG';" /></a>
Aber das Bild bleibt im Hover zustand -.-
Hilfe ! ______________ Mit freundlichen Grüßen
Florian |
|
|
↑
|
|
|
|
