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

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02
js til asp backend Af keepy i JavaScript	1	11/10/202310:28	11/10/202313:46

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

26/04

Prøvekørt: Sydkoreansk familie-kolos har plads til alle og sætter alle på plads

26/04

Køber 25.000 Copilot-licenser af Microsoft i kæmpe-aftale - vil investere milliarder i AI

26/04

En af disse 10 spændende it-stillinger kan blive det næste skridt i din karriere

26/04

Nørgaard: Gør som de andre: Tag ingen beslutninger og gør intet

26/04

Alphabet udbetaler udbytte til ejere for første gang nogensinde: Aktien stiger eksplosivt og stiftere scorer over en milliard

26/04

"Når jeg engang ikke er her mere, så vil jeg gerne huskes som generøs lige som ham"

26/04

Spotify raser: Apple blokerer vores opdatering til iPhones

26/04

Det danske it-lovsystem skal moderniseres: Styrelse søger ene-leverandør til 10-årig kæmpe-kontrakt

26/04

7N fra København runder halvanden milliard kroner i omsætning: Beskæftiger nu 1.700 konsulenter

26/04

Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024

26/04

Martin Thorborg har givet alle sin 100 ansatte fri i dag: Store Bededag er blevet til ’Store Badedag’

Vis flere artikler

IT-JOB

Timengo

Serviceminded Cloud Operation Engineer

Cognizant Technology Solutions Denmark ApS

Senior Test Engineer

Metro Service A/S

Experienced IT Administrator Microsoft & Mobility

Timengo

Product and Documentation Specialist

Jyske Bank

Senior Forretningsudvikler til Pris

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 19:39	Kan ikke låse afdøds mobiltelefon op Af frejanatur i Mobiltelefoner
I går 13:33	Kan ikke finde opretteren af en e-mailadresse og facebookside Af made4u.mnn i E-mail programmer
27/0419:48	Hvilken ugedag var "24. Marts, 1998" ? Af Ikke-ekspert i Fri debat
27/0414:03	“Haster” Hjælp til 240hz og konsol monitor køb. Af nalacin i Skærme
27/0413:38	Vise en popup overskrift når cursoren stryges henover en control Af per2edb i Access