Avatar billede 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>
Avatar billede 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/
Avatar billede olsensweb.dk Ekspert
24. august 2012 - 15:57 #2
Avatar billede 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??
Avatar billede 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
Avatar billede 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>
Avatar billede 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>
Avatar billede 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?
Avatar billede olsensweb.dk Ekspert
27. august 2012 - 10:09 #8
så pyt da
Avatar billede langkiller Nybegynder
28. august 2012 - 18:23 #9
værsågod :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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