Søg
Avatar billede tras Juniormester
21. marts 2006 - 11:51 Der er 17 kommentarer og
1 løsning

img skal skifte udsene når jeg tager musen over hvordan

Jeg har problemer for mit billede skal skifte class når jeg holder musen over billedet.

<td><div title="Bold"><a href=""><img style="border:0;" src="images/menu/ed_format_bold.gif" /></a></div></td>

<style>
            .AIbtn {
                cursor: hand;
                padding: 4px;
                width : 25px;
                height : 25px;
                overflow: visible;
            }
            .AIbtnOver {
                cursor: hand;
                border-bottom : 1px solid ButtonShadow;
                border-right : 1px solid ButtonShadow;
                border-left : 1px solid ButtonHighlight;
                border-top : 1px solid ButtonHighlight;
                padding: 3px;
                width : 25px;
                height : 25px;
            }
            .AIbtnSel {
                cursor: hand;
                border-left: 1pt solid ButtonShadow;
                border-top: 1pt solid ButtonShadow;
                border-right: 1pt solid ButtonHighlight;
                border-bottom: 1pt solid ButtonHighlight;
                padding : 3px;
                width : 25px;
                height : 25px;
            }
            .AIico {
                align: center;
                vertical-align: middle;
                filter = progid:DXImageTransform.Microsoft.shadow(Color="ButtonFace", Direction="90", Strength="3");
            }
            .AIicoOver {
                align: center;
                vertical-align: middle;
                filter = progid:DXImageTransform.Microsoft.shadow(Color="#666666", Direction="120", Strength="3");
            }
        </style>
Avatar billede mm12010 Nybegynder
21. marts 2006 - 12:35 #1
<a href=""><img style="border:0;" src="images/menu/ed_format_bold.gif" /></a>

...

a img.AIbtn{
  cursor: hand;
  padding: 4px;
  width : 25px;
  height : 25px;
  overflow: visible;
}
a:hover img.AIbtn{
  cursor: hand;
  border-bottom : 1px solid ButtonShadow;
  border-right : 1px solid ButtonShadow;
  border-left : 1px solid ButtonHighlight;
  border-top : 1px solid ButtonHighlight;
  padding: 3px;
  width : 25px;
  height : 25px;
}

se evt: http://www.eksperten.dk/artikler/223
Avatar billede tras Juniormester
21. marts 2006 - 13:07 #2
Virker ikke
Avatar billede mclemens Nybegynder
22. marts 2006 - 01:10 #3
a:hover virker kun på a tags...
... hvis det skal gøres skal js til ;)

<html><head><script type="text/javascript">

</script>

<style>
.AIico {
align: center;
vertical-align: middle;
filter = progid:DXImageTransform.Microsoft.shadow(Color="ButtonFace", Direction="90", Strength="3");
}

.AIicoOver {
align: center;
vertical-align: middle;
filter = progid:DXImageTransform.Microsoft.shadow(Color="#666666", Direction="120", Strength="3");
}
</style>
</head>

<body>
<table><tr><td><div title="Bold"><a href="#"><img style="border:0px;" class="AIico" onmouseover="this.className='AIicoOver';" onmouseout="this.className='AIico';" src="images/menu/ed_format_bold.gif" /></a></div></td></tr></table>

</body></html>
Avatar billede roenving Novice
22. marts 2006 - 02:08 #4
At skifte class on-the-fly er da en de tåbeligste ideer, der findes ...

-- og brug af af effekter, der alene virker i een browser på eet styresystem kan kun forsvares i et intranet, hvor man har kontrol over, at alle benytter præcis den kombination !-)
Avatar billede mclemens Nybegynder
22. marts 2006 - 02:17 #5
At skifte class on-the-fly er da en de tåbeligste ideer, der findes ...>
- undskyld... er der en bedre løsning, hvis han vil have en ?

-- og brug af...>
- jeg bruger ingen js på min side overhovedet :) ... endnu
Avatar billede mclemens Nybegynder
22. marts 2006 - 02:19 #6
- kan selvfølgelig ændre styles on the fly
istedet for class... er det bedre = ?
Avatar billede roenving Novice
22. marts 2006 - 02:27 #7
Hvis du skifter eet class-name på en hel webside opgiver css-fortolkeren på forhånd at gennemskue konsekvenserne af cascading osv., så den kaster simpelthen hele sit css-DOM-bibliotek i havet og genberegner hele sidens udseende ...

css-DOM-biblioteket er simpelthen en liste over alle elementers visning (i alle tilgængelige tilstande), og i den sammenhæng er visse properties jo cascaded (nedarvet) ned over underliggende elementer ...

-- og præcis ændringen af berørte style-properties er også den anbefaling f.eks. M$ havde liggende i et 'Best practices'-dokument i en årrække (mit link gik dog dødt ved deres omorganisering af siden forrige år !-)
Avatar billede mclemens Nybegynder
22. marts 2006 - 02:50 #8
så det vil sige = ? er der en der er bedst eller er de lige gode?
link 1 med this.style=
eller link 2 med document.getElementById("idnavn").style=

- skal jo nok pakkes ind i et script med return
eller call på id's senere hvis det er ...

takker for uddelingen af din viden :)
- vil du have nogle point af mig
for tips'ene du har givet?

<html><head><script type="text/javascript">

</script>

<style>
.AIico {
align: center;
vertical-align: middle;
filter = progid:DXImageTransform.Microsoft.shadow(Color="ButtonFace", Direction="90", Strength="3");
}
</style>
</head>

<body>
<table><tr><td><div title="Bold">
<a href="#"><img style="border:0px;" class="AIico" id="billede1"onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.shadow(Color=\'#666666\', Direction=\'120\', Strength=\'3\')';" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.shadow(Color=\'ButtonFace\', Direction=\'90\', Strength=\'3\')';" src="1.gif" /></a>

<a href="#"><img style="border:0px;" id="billede2" class="AIico" onmouseover="document.getElementById('billede2').style.filter='progid:DXImageTransform.Microsoft.shadow(Color=\'#666666\', Direction=\'120\', Strength=\'3\')';" onmouseout="document.getElementById('billede2').style.filter='progid:DXImageTransform.Microsoft.shadow(Color=\'ButtonFace\', Direction=\'90\', Strength=\'3\')';" src="1.gif" /></a>
</div></td></tr></table>

</body></html>
Avatar billede roenving Novice
22. marts 2006 - 03:04 #9
Alt andet lige vil en this.et-eller-andet være bedre end en document.getElementById("noget").et-eller-andet, da browseren jo så ikke skal ud i verden for at finde elementet, det har den jo i forvejen i hånden ...

-- eller forstod jeg dig ?-)
Avatar billede mclemens Nybegynder
22. marts 2006 - 07:52 #10
niks, takker for svaret :)
- jeg var bare nervøs om getElement...
havde været mere korrekt end this'en
Avatar billede mclemens Nybegynder
22. marts 2006 - 08:18 #11
... det ene link skal jo nok fjernes...

puttede det ind i en eval, hvis nu flere end en style skal ændres når musen køres over eller de styles der skal ændres for det enkelte billede skal gøres betinget afhængig af billedets className, Id, src, nuværende style m.v. :P

<html><head><script type="text/javascript">

miceover="this.style.filter='progid:DXImageTransform.Microsoft.shadow(Color=\\'#666666\\', Direction=\\'120\\', Strength=\\'3\\')'";

miceout="this.style.filter='progid:DXImageTransform.Microsoft.shadow(Color=\\'ButtonFace\\', Direction=\\'90\\', Strength=\\'3\\')'";

</script>

<style>
.AIico {
align: center;
vertical-align: middle;
filter = progid:DXImageTransform.Microsoft.shadow(Color="ButtonFace", Direction="90", Strength="3");
}
</style>
</head>

<body>

<table><tr><td><div title="Bold">
<a href="#"><img style="border:0px;" class="AIico" onmouseover="eval(miceover);" onmouseout="eval(miceout);" src="images/menu/ed_format_bold.gif" /></a>

<a href="#"><img style="border:0px;" class="AIico" onmouseover="eval(miceover);" onmouseout="eval(miceout);" src="images/menu/ed_format_bold2.gif" /></a>
</div></td></tr></table>

</body></html>
Avatar billede mm12010 Nybegynder
22. marts 2006 - 09:07 #12
her er et klip af noget jeg af og til bruger - det ved jeg i hvart fald at der virker, så kan du selv rette klasse-navne og styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
img, a img{border:none;}
a img.opChange{filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
a:hover img.opChange{filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;}
</style>
</head>
<body>
<a href="http://www.eksperten.dk/spm/696880/">
  <img src="http://www.eksperten.dk/img/elogo.png" alt="E" class="opChange">
</a>
</body>
</html>
Avatar billede tras Juniormester
22. marts 2006 - 09:25 #13
Jeg takker mange gange for jeres svar det har virkelig gjordt en forskel.
:D:D:D:D:D

Og så vvil jeg gerne takke jer for en extream god dialog. håber andre vil bruge noget af alt det i har delt...

Når jeg går over det hele helder jeg mest til at give mclemens mine points, ret mig vis i mener noget andet. Det er hans løsning jeg har brugt. :D

Tak fra mig af
Avatar billede mclemens Nybegynder
22. marts 2006 - 11:47 #14
svar ;)

Tak fra mig af>
- Det var så lidt :)

10 til mig...
- giv roenving point også...
... uden ham havde jeg ikke valgt at ændre
class skiftet til et style skifte ...

p.s.: tak for hjælp/vejledning roenving :)
Avatar billede mclemens Nybegynder
22. marts 2006 - 11:47 #15
ups...
prøver igen
svar ;)
Avatar billede tras Juniormester
22. marts 2006 - 12:04 #16
lol oki
Avatar billede mclemens Nybegynder
22. marts 2006 - 12:12 #17
roenving> -> http://www.eksperten.dk/spm/696880
Tak for din hjælp/tips her samt i diverse andre tråde :)
Avatar billede mclemens Nybegynder
22. marts 2006 - 12:14 #18
... det går ikke så godt for mig her idag :/
roenving -> http://www.eksperten.dk/spm/697209
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I går 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »