webForumDet fria alternativet
Logga in / Bli medlem

hover länk css

HTML & CSS

13 svar · 502 visningar · startad av MizzK

MizzKMedlem sedan juni 2003410 inlägg
Trådstart#1

undrar hur man gör när man vill att en liten bild skall visas främför länken i menyn när man drar över länkarna??
css kan man änvända det? isf föredrara jag det =)

har sökt lite här på forumet men hittade inte d jag sökte =(

frankofs avatarfrankofMedlem sedan jan. 20016 874 inlägg
#2

Javascript/dhtml
Exempel:

<head> 
<style>
#t1,#t2,#t14,#t15,#t16{ 
position:absolute; 
left:25px; 
top:60px; 
z-index:49; 
visibility:hidden;
background-color:#FF9900;
border:solid; border-width:1px; border-color:black;}
</style>
</head>
<body>
<span id="t1"><img src="bild.gif"></span>
<span id="t2"><img src="bild2.gif"></span>
<table>
<tr>
 <td align="center"><a href="lek.htm" title="Första sidan" onmouseout="document.getElementById
('t1').style.visibility='hidden'" 
onmouseover="document.getElementById
('t1').style.visibility='visible'">Start</a></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td align="center"><a href="bandbredd.htm" title="Vad är viktigt?"  onmouseout="document.getElementById
('t2').style.visibility='hidden'" 
onmouseover="document.getElementById
('t2').style.visibility='visible'">Bandbrädd</a></td></tr>
</table>
</body>

En grundkod att bygga på ;)
Det blir till att justera lite sedan ;)
p.s. vet inte hur den fungerar, har inte testat, sitter på jobbet nu.

bossseMedlem sedan juni 2003771 inlägg
#3

Frankof skrev:
Det blir till att justera lite sedan.
Gör man det så blir det så här!

<HTML>
<head> 
<style>

#t1 { position:absolute; left:5px; top:20px; visibility:hidden;}
#t2 { position:absolute; left:5px; top:45px; visibility:hidden;}

.a { position:absolute; left:45px; top:20px; }
.b { position:absolute; left:46px; top:45px; }

</style>
</head>

<body>
<span id="t1"><img src="bild1.jpg" widht=15px height=20px></span>
<span id="t2"><img src="bild2.jpg" widht=15px height=20px></span>

<a href ="lek.htm" class=a title="Första sidan" onmouseout="document.getElementById
('t1').style.visibility='hidden'" onmouseover="document.getElementById
('t1').style.visibility='visible'">Start</a>

<br>

<a href="bandbredd.htm" class=b title="Vad är viktigt?"  onmouseout="document.getElementById
('t2').style.visibility='hidden'" onmouseover="document.getElementById
('t2').style.visibility='visible'">Bandbrädd</a>
</body>
</HTML>
MizzKMedlem sedan juni 2003410 inlägg
#4

hmm, vet inte riktigt hur jag ska göra det.. de är så att jag använder mig av en färdig javascript meny, men skulle vilja lägga till så jag får en bild framför.. men hur gör jag det med denna koden??

bossseMedlem sedan juni 2003771 inlägg
#5

Lägg ut koden för javascript menyn då. så ska vi nog fixa det.
Annars blir det väldigt svårt.

MizzKMedlem sedan juni 2003410 inlägg
#6

här

var active=null,_oE=null;
var subMenus=[
	["sub1","cat","prog"],
	["sub2","cat","for"],
	["sub3","cat","vip"],
	["sub4","cat","noll"],
	["sub5","cat","lank"],
	["sub6","cat","kont"]
];

function getElm(e){
	switch(true){
	case typeof(document.all)=="object":
		return document.all[e];
	case typeof(document.getElementById)=="function":
		return document.getElementById(e);
	default:
		return null;
	}
};

function showHide(s){
	var e=getElm(s);

	if(!e){
		return true;
	}

	if(active&&active!=e.id){
		var oE=getElm(active);
		if(document.all){
			oE.nextSibling.style.display=(window.opera)?"table-row":"block";
		} else {
			oE.nextSibling.nextSibling.style.display="table-row";
		}
		oE.style.display="none";
	}
	else if(!active&&find()){
		var i=subMenus.length;
		while(i-->0){
			if(e==getElm(subMenus[i][0])){
				if(document.all){
					_oE.nextSibling.style.display=(window.opera)?"table-row":"block";
				} else {
					_oE.nextSibling.nextSibling.style.display="table-row";
				}
				continue;
			} else {
				getElm(subMenus[i][0]).style.display="none";
			}
		}
	}

	if(e.style.display==""||e.style.display=="none"){
		if(document.all){
			e.style.display=(window.opera)?"table-row":"block";
			e.nextSibling.style.display="none";
		} else {
			e.style.display="table-row";
			e.nextSibling.nextSibling.style.display="none";
		}
	} else {
		if(document.all){
			e.nextSibling.style.display=(window.opera)?"table-row":"block";
		} else {
			e.nextSibling.nextSibling.style.display="table-row";
		}
		e.style.display="none";
	}

	active=e.id;

	return false;
};

function find(){
	if(subMenus.length<1 || location.search.indexOf("cat=")<1 || location.search.indexOf("cat=pics")>0){
		return 0;
	}

	var
		o=subMenus,
		i=o.length,
		l=location.search;
	while(i-->0){
		if(l.indexOf(o[i][1])>0){
			if(l.split(o[i][1])[1].indexOf(o[i][2])>0){
				_oE=getElm(o[i][0]);

				if(document.all){
					_oE.style.display=(window.opera)?"table-row":"block";
					_oE.nextSibling.style.display="none";
				} else {
					_oE.style.display="table-row";
					_oE.nextSibling.nextSibling.style.display="none";
				}
				continue;
			}
		}
		getElm(o[i][0]).style.display="none";
	}
	return 1;
};

window.onload=function(){
	find();

var a=document.getElementsByTagName("a");
for (var i=0;i<a.length;i++){
if(a[i].href.substring(a[i].href.lastIndexOf("/")+1)==location.href.substring(location.href.lastIndexOf("/")+1)){
a[i].style.textDecoration="underline";
}
}
};
jarvkloMedlem sedan juli 20013 378 inlägg
#7

Hmm...

Men inte behöver man väl använda Javascript för att få en bild att lägga sig före länkar vid hover numera!

Testa följande rena CSS-lösning!

http://member.webforum.nu/2241/lankbild_med_css_vid_hover.html

Den bygger på följande enkla CSS-stilar:

<style type="text/css">
<!--
a {
  padding-left:15px; /* bildens bredd + "moms" */
}
a:hover {
  background:url(wink.gif) no-repeat left;
}
 -->
</style>

Varje länk kommer att förses med ett 15px tomrum till vänster om sig tack vare paddingen (dvs där visas grundbakgrunden för länken ;) ).
Vid hover läggs en bakgrundsbild "under" länken, men eftersom den positioneras "left" (dvs längst till vänster) så kommer den att visas "före" länken när man för markören över den...

Lösningen är inspirerad av bl.a. http://www.thesunreport.org/exp/minitabs/vertical.html - fast deras meny utgår från en <ul>-lista vilket gör CSS:en lite klurigare.

MizzKMedlem sedan juni 2003410 inlägg
#8

visst kan man göra så att det bara är på vissa länkar..

jarvkloMedlem sedan juli 20013 378 inlägg
#9

Jupp.
Sätt en class på de länkar du vill ha effekten på och deklarera såhär istället:

<style type="text/css">
<!--
a.snyggmeny {
  padding-left:15px; /* bildens bredd + "moms" */
}
a.snyggmeny:hover {
  background:url(wink.gif) no-repeat left;
}
 -->
</style>

[...]

<a href="#" class="snyggmeny">Länk med bild före</a><br/>
<a href="#" class="snyggmeny">Länk med bild före</a><br/>
<a href="#" class="snyggmeny">Länk med bild före</a><br/>
<a href="#" class="snyggmeny">Länk med bild före</a><br/>

Eller så kan du lägga menylänkarna i en eller flera div:ar såhär (så slipper du skriva så många "class" ;) ):

<style type="text/css">
<!--
.snyggmeny a {
  padding-left:15px; /* bildens bredd + "moms" */
}
.snyggmeny a:hover {
  background:url(wink.gif) no-repeat left;
}
 -->
</style>

[...]

<div class="snyggmeny">
  <a href="#">Länk med bild före</a><br/>
  <a href="#">Länk med bild före</a><br/>
  <a href="#">Länk med bild före</a><br/>
  <a href="#">Länk med bild före</a><br/>
</div>

Förresten - vill du ha dina dropdown-menyer byggda med enbart CSS (alltså helt utan en massa scriptande) så hittar du en bra artikel om hur man gör sådant på http://www.alistapart.com/articles/dropdowns

MizzKMedlem sedan juni 2003410 inlägg
#10

när jag gjorde så, påverkades den av min a:hover kan man undvika det? sen undrar jag hur man gör för att bilden skall stanna kvar när man klickar på länken..

MizzKMedlem sedan juni 2003410 inlägg
#11

om det inte går att lösa med css kan ni väl flytta det till javascript =)

jarvkloMedlem sedan juli 20013 378 inlägg
#12

Det går att lösa med CSS om du struktutrerar om din kod lite.

Först delar du upp dokumentet i olika delar med t.ex. <div>-taggar

<div id="menyn">...</div>
<div id="reklamen">...</div>
<div id="innehallet">...</div>

osv.

Sedan deklarerar du en a:hover för varje del istället för din "globala" a:hover såhär:

#meny a:hover {...}
#reklamen a:hover {...}
#innehallet a:hover {...}

samtidigt som du tar bort din ursprungliga a:hover så funkar det som du vill.

MizzKMedlem sedan juni 2003410 inlägg
#13

måste man ha "ny" hover för varje del man skall ha hover på?? eller kan man köra med class?

jarvkloMedlem sedan juli 20013 378 inlägg
#14

Såklart man kan använda class också!

a.speciell:hover {...}
[...]
<a class="speciell">...</a>

funkar ju alltid, men man behöver inte göra det så "handfast" om man inte vill...

Man kan också kombinera id och en eller flera klasser i ett class-attribut i en och samma tagg såhär:

<div id="menyn" class="speciellalankar fetgrymtext spattigabilder">... <a href="#">... </a> ... </div>

I det fallet blir CSS-deklarationen för a:hover i .speciellalankar såhär:

.speciellalankar a:hover {...}

Kom bara ihåg att när id och class finns samtidigt i en tagg, så gäller stilarna från id:t före stilarna från class:en

dvs finns en

#menyn a:hover {...}

i din CSS så slås den ihop med

.speciellalankar a:hover {...}

så att de stilar som finns i definierade i bägge får de värden som finns definierade i

#menyn a:hover {...}

Exempel:

.speciellalankar a:hover {color:green}
#menyn a:hover {color:red}

gör att länkarna i

<div id="menyn" class="speciellalankar">... <a href="#">... </a> ... </div>

blir röda vid hover.

396 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
126 ms — deklarationer (db)
125 ms — hämta statistik (db)
144 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)