Oprettet tir. d. 21. august 2012 kl. 21:13:18
60 point uddelt | 9 kommentarer
onmouseover fade til nyt billede
Har en menu hvor billedet for en kanp skifter når musen er over den.Det nye billede bliver bare sat ind så "pludseligt".. det kunne se lidt bedre ud hvis det fadede lidt langsommere ind. Og tilbage igen når musen bliver fjernet fra knappen. Er ikke særlig skarp i javascript så er der nogen der kan hjælpe ? Her er min kode for knappen:
<a href="index.php"><img src="pics/designs/home1.png" onMouseOver="src='pics/designs/home1glow.png'" onMouseOut="src='pics/designs/home1.png'" border="0"></a>
Skrevet ons. d. 22. august 2012 kl. 00:08:04| #1
niklask (4.715 point)
Jeg synes du skal kigge på noget jQuery, det kan bruges til en masse på din hjemmeside.
http://jquery.com/
http://jquery.com/
Skrevet fre. d. 24. august 2012 kl. 15:57:33| #2
prøv at google js fade effect
http://www.switchonthecode.com/ (...)
http://brugbart.com/ (...)
og ja man kunne bruge jqyery, hvis man anvender det i forvejen, ellers er det 100K overhead + evt 200K UI
http://api.jquery.com/ (...)
http://api.jquery.com/ (...)
http://docs.jquery.com/ (...)
http://www.switchonthecode.com/ (...)
http://brugbart.com/ (...)
og ja man kunne bruge jqyery, hvis man anvender det i forvejen, ellers er det 100K overhead + evt 200K UI
http://api.jquery.com/ (...)
http://api.jquery.com/ (...)
http://docs.jquery.com/ (...)
Skrevet fre. d. 24. august 2012 kl. 22:45:36| #3
langkiller (3.900 point)
Har fået sat noget sammen der virker som det skal. Har følgende kode:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display:none;
float:left; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="hej" background="a.jpg" width="164" height="176"><div id="bum"><img src="c.jpg"></div></td>
</tr>
</table>
<script>
$("#hej").hover(function () {
$("#bum:hidden:first").fadeIn("slow");
});
$("#bum").mouseleave(function () {
$("#bum").fadeOut("slow");
});
</script>
</body>
</html>
der er bare et lille problem. td'en i tabellen udvider sig et par pixels nedad når musen er over den og div'en bliver vist.
Den går tilbage til normal størrelse når musen bliver fjernet.. Nogen der ved hvordan det kan løses??
<!DOCTYPE html>
<html>
<head>
<style>
div {
display:none;
float:left; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="hej" background="a.jpg" width="164" height="176"><div id="bum"><img src="c.jpg"></div></td>
</tr>
</table>
<script>
$("#hej").hover(function () {
$("#bum:hidden:first").fadeIn("slow");
});
$("#bum").mouseleave(function () {
$("#bum").fadeOut("slow");
});
</script>
</body>
</html>
der er bare et lille problem. td'en i tabellen udvider sig et par pixels nedad når musen er over den og div'en bliver vist.
Den går tilbage til normal størrelse når musen bliver fjernet.. Nogen der ved hvordan det kan løses??
Skrevet lør. d. 25. august 2012 kl. 14:34:51| #4
har de 2 billeder sammen størrelse ??
sæt størrelse i din tabel til den største.
læg den evt online så vi kan se det
iøvrigt er det en uskik at bruge tabeller til design
sæt størrelse i din tabel til den største.
læg den evt online så vi kan se det
iøvrigt er det en uskik at bruge tabeller til design
Skrevet søn. d. 26. august 2012 kl. 07:48:01| #5
prøv at google jquery swap image hover
eller jquery swap image fade hover
lille omskrivning af http://stackoverflow.com/ (...)
eller jquery swap image fade hover
lille omskrivning af http://stackoverflow.com/ (...)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ (...)
<style type="text/css">
</style>
</head>
<body>
<div id="mask-div"><img src="a.gif" /></div>
<div id="test-img"><img src="c.gif" /></div>
<script type="text/javascript">
$("#mask-div")
.css({
"position": "absolute"
})
.mouseover( function() {
$(this).fadeOut("slow");
});
$("#test-img").mouseout( function() {
$("#mask-div").fadeIn("slow");
});
</script>
</body>
</html>
Skrevet søn. d. 26. august 2012 kl. 16:28:47| #6
langkiller (3.900 point)
har lagt den ud på http://clich.net/ (...)
så i kan se hvad jeg mener.
der er ændret en smule, koden ser sådan her ud nu:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display:none;
float:left; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="hej" background="a.png" width="82" height="76"><a href=""><div id="bum"><img src="c.png"></div></a></td>
</tr>
</table>
<script>
$("#hej").mouseover(function () {
$("#bum:hidden:first").fadeIn("slow");
});
$("#bum").mouseout(function () {
$("#bum").fadeOut("slow");
});
</script>
</body>
</html>
så i kan se hvad jeg mener.
der er ændret en smule, koden ser sådan her ud nu:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display:none;
float:left; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="hej" background="a.png" width="82" height="76"><a href=""><div id="bum"><img src="c.png"></div></a></td>
</tr>
</table>
<script>
$("#hej").mouseover(function () {
$("#bum:hidden:first").fadeIn("slow");
});
$("#bum").mouseout(function () {
$("#bum").fadeOut("slow");
});
</script>
</body>
</html>
Skrevet søn. d. 26. august 2012 kl. 18:19:41| #7
langkiller (3.900 point)
nå.. tabellen var egentlig også bare for at prøve det af.. bruger duivs i mit design. og det virker fint. her er så den kode der fungerer:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="hej" style="background-image: url(a.png); width: 82px; height: 76px;"><div style="display:none; float:left;" id="bum"><a href=""><img src="c.png"></div></a></div>
<script>
$("#hej").mouseover(function () {
$("#bum:hidden:first").fadeIn("slow");
});
$("#bum").mouseout(function () {
$("#bum").fadeOut("slow");
});
</script>
</body>
</html>
mange tak for hjælpen!
@ronols: vil du have points?
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="hej" style="background-image: url(a.png); width: 82px; height: 76px;"><div style="display:none; float:left;" id="bum"><a href=""><img src="c.png"></div></a></div>
<script>
$("#hej").mouseover(function () {
$("#bum:hidden:first").fadeIn("slow");
});
$("#bum").mouseout(function () {
$("#bum").fadeOut("slow");
});
</script>
</body>
</html>
mange tak for hjælpen!
@ronols: vil du have points?
Skrevet man. d. 27. august 2012 kl. 10:09:14| #8
Accepteret svar!60 point tildelt
Skrevet tir. d. 28. august 2012 kl. 18:23:44| #9
Log ind
Seneste spørgsmål
Første ID er tom ?
Oprettet den 11. maj 2013 kl. 11.54
ingeman giver 200 point for svar | Giv et svar »
alert box frem hvis der intet indhold er på siden
Oprettet den 8. maj 2013 kl. 19.43
tobrukDk giver 60 point for svar | Giv et svar »
Seneste guides
Seneste nyheder
Tips & Tricks fra PC World
Her er seks Google Labs-funktioner, som du skal slå til med det samme
Gmail Labs giver dig adgang til en masse smarte funktioner, som Googles ingeniører leger med i øjeblikket.
Anmeldelser fra PC World
Test: Samsung Galaxy S4 er et hit - trods gøglertricks
Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.
Seneste blogindlæg
Tvangslukke spørgsmål: Hvad er den bedste løsning?
Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...
Nyheder fra PC World
Tre smarte trick som gør Windows 8 bedre
Boot direkte til skrivebordet, få en strategisk godt placeret luk-knap og slip for at logge ind. Her er tre tips til Windows 8, som gør det nemmere at blive venner med styresystemet.
Nyheder fra Computerworld
Galleri: Her er Googles nyeste værktøj og legetøj
Google har i denne uge afholdt udviklerkonferencen I/O i San Francisco. Se her hvad søgegiganten kunne præsentere af nyskabelser.
Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger