CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

langkiller Nybegynder

21. august 2012 - 21:13 Der er 8 kommentarer og
1 løsning

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>

Synes godt om

niklask Nybegynder

22. august 2012 - 00:08 #1

Jeg synes du skal kigge på noget jQuery, det kan bruges til en masse på din hjemmeside.
http://jquery.com/

Synes godt om

olsensweb.dk Ekspert

24. august 2012 - 15:57 #2

prøv at google js fade effect
http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
http://brugbart.com/Articles/javascript-fade

og ja man kunne bruge jqyery, hvis man anvender det i forvejen, ellers er det 100K overhead + evt 200K UI
http://api.jquery.com/fadeIn/
http://api.jquery.com/fadeout/
http://docs.jquery.com/UI/Effects/fade

Synes godt om

langkiller Nybegynder

24. august 2012 - 22:45 #3

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??

Synes godt om

olsensweb.dk Ekspert

25. august 2012 - 14:34 #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

Synes godt om

olsensweb.dk Ekspert

26. august 2012 - 07:48 #5

prøv at google jquery swap image hover
eller jquery swap image fade hover
lille omskrivning af http://stackoverflow.com/questions/5259540/jquery-image-hover-with-swap-and-fade


<!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/ajax/libs/jquery/1/jquery.min.js"></script>
    <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>

Synes godt om

langkiller Nybegynder

26. august 2012 - 16:28 #6

har lagt den ud på http://clich.net/bum.htm
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>

Synes godt om

langkiller Nybegynder

26. august 2012 - 18:19 #7

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?

Synes godt om

olsensweb.dk Ekspert

27. august 2012 - 10:09 #8

så pyt da

Synes godt om

langkiller Nybegynder

28. august 2012 - 18:23 #9

værsågod :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS