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 =(
hover länk css
13 svar · 502 visningar · startad av MizzK
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> </td>
</tr>
<tr>
<td> </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.
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>
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??
Lägg ut koden för javascript menyn då. så ska vi nog fixa det.
Annars blir det väldigt svårt.
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";
}
}
};
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.
visst kan man göra så att det bara är på vissa länkar..
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
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..
om det inte går att lösa med css kan ni väl flytta det till javascript =)
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.
måste man ha "ny" hover för varje del man skall ha hover på?? eller kan man köra med class?
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.