Javascript en css opacity - Softwareontwikkeling

woensdag 1 juni 2005 16:44

Acties:

Verwijderd

Topicstarter

Bonjourrr

Ik heb en div
en daar in een plaatje die een opacity van 50% heeft..
nou wil ik dat als je over die div heen gaat, de opacity van het plaatje 100% word. Maar helaas wil het voor geen meter lukken..

dit is wat ik heb
<div class=\"project\" onmouseover=\"test.style.MozOpacity=1;test.filters.alpha.opacity=100\" onclick=\"openProject('{$project['PID']}')\">
[img]\"[/img]

ik weet bijna niets van javascript dus dit zal ook wel nergens opslaan Maar hopelijk kan iemand mij helpen

woensdag 1 juni 2005 16:48

Acties:

TeeDee

CQB 241

ipv "test" getElementById('test').style. etc. etc. gebruiken?
Test voordat je blaat.

Ben even aan het proberen

Even gauw in elkaar gezet hoor:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>JS / Switchen</title>
    <style type="text/css">
    .alpha100 { opacity: 1; filter: alpha(opacity=100);}
    .alpha50 { opacity: .5; filter: alpha(opacity=50);}
</style>
<script type="text/javascript">
<!--
function fader()
{
    document.getElementById('test').className="alpha100";
}

function resetfader()
{
    document.getElementById('test').className="alpha50";
}
-->
</script>
</head>
<body>
<div id="meukeee">
    [img]"logo.jpg"[/img]
</div>
</body>
</html>

In principe staan alle "buildingblocks" voor jouw probleem in.

Oja, getest in FireFox 1.0.4 en IE6!

[ Voor 144% gewijzigd door TeeDee op 01-06-2005 17:03 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 1 juni 2005 16:49

Acties:

Verwijderd

ik denk niet dat je zelf veel vooronderzoek hebt gedaan maar goed.

hier is een linkje met uitleg over hoe javascript opacity werkt:
http://www.javascript-page.com/imagefade2.html

(let wel op, die werkt alleen in MSIE)

woensdag 1 juni 2005 17:08

Acties:

Verwijderd

Topicstarter

Het is de bedoeling dat als je over de div heen gaat dat de image fade niet alleen als je over het plaatje zelf heen gaat. Ik heb super lang zitten zoeken op internet!

woensdag 1 juni 2005 17:21

Acties:

TeeDee

CQB 241

Verwijderd schreef op woensdag 01 juni 2005 @ 17:08:
Het is de bedoeling dat als je over de div heen gaat dat de image fade niet alleen als je over het plaatje zelf heen gaat. Ik heb super lang zitten zoeken op internet!

Probeer zelf eens wat?
Ik heb hier een pagina voor jou gemaakt met alle building blocks daarin.
"Rommel" daar eens mee?

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 1 juni 2005 17:22

Acties:

djjansen

Verwijderd schreef op woensdag 01 juni 2005 @ 17:08:
Het is de bedoeling dat als je over de div heen gaat dat de image fade niet alleen als je over het plaatje zelf heen gaat. Ik heb super lang zitten zoeken op internet!

Je krijgt geweldige code aangelevert van TeeDee..... heb je er wel goed naar gekeken?

Ik gok zo, dat wanneer je de onmouseover en onmouseout code naar het divje verplaatst dat het zal werken.

woensdag 1 juni 2005 17:31

Acties:

Verwijderd

Ja, met de code die hierboven staat werkt het perfect ... zelfs in ff (ik wist iet dat die de filter dingen ook ondersteund trouwens...)

woensdag 1 juni 2005 17:34

Acties:

TeeDee

CQB 241

Verwijderd schreef op woensdag 01 juni 2005 @ 17:31:
Ja, met de code die hierboven staat werkt het perfect ... zelfs in ff (ik wist iet dat die de filter dingen ook ondersteund trouwens...)

FF ondersteund filter: etc. ook niet. Alleen IE. Vandaar dat in de CSS opacity EN filter staat.
Bron: http://www.quirksmode.org/css/opacity.html

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 1 juni 2005 21:22

Acties:

Verwijderd

Topicstarter

Thanks! ik heb het werkend in IE en FF alleen heb ik een probleem..

omdat ik met een loopje alles uit een databse haal krijgen al die plaatje dus hetzelfde id. en werkt het fade effect alleen bij de eerste die uit de db komt. Hoe kan ik ervoor zorgen dat ze allemaal werken?

woensdag 1 juni 2005 21:33

Acties:

TeeDee

CQB 241

Dan geef je er geen id maar een class aan. En vraag je het op met getElementbyClassName('hierjeclassnaampje').

Of ipv van getElementById een getElementByTag('div') > kan lastig zijn als je nog meerdere divs op je page hebt

* TeeDee weer gauw terug naar /14 voordat ik nog stomme dingen zeggen

[ Voor 20% gewijzigd door TeeDee op 01-06-2005 22:23 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 1 juni 2005 22:02

Acties:

Verwijderd

Topicstarter

sorry ik snap het niet helemaal.. misschien kan je me beter helpen als ik het wat beter uitleg

ik haal projecten uit een database.
met een for loopje krijgt elk project een div(class project) met daarin een plaatje(class alpha50).

hoe zorg ik nou dat de functie het verschil weet tussen alle divjes?

woensdag 1 juni 2005 22:47

Acties:

thomaske

» » » » » »

als je de code van TeeDee even ombouwt tot het volgende:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>JS / Switchen</title>
    <style type="text/css">
    .alpha100 {    opacity: 1;    filter: alpha(opacity=100);}
    .alpha50 { opacity: .5;    filter: alpha(opacity=50);}
</style>
<script type="text/javascript">
<!--
function fader(element)
{
    element.className="alpha100";
}

function resetfader(element)
{
    element.className="alpha50";
}
-->
</script>
</head>
<body>
<div id="meukeee">
    [img]"logo.jpg"[/img]
</div>
</body>
</html>

[ Voor 21% gewijzigd door thomaske op 01-06-2005 22:47 ]

Brusselmans: "Continuïteit bestaat niet, tenzij in zinloze vorm. Iets wat continu is, is obsessief, dus ziekelijk, dus oninteressant, dus zinloos."

woensdag 1 juni 2005 22:51

Acties:

MeIsTwisted

not a Twisted mind

of een verschillend id toekennen, maar bovenstaande is makkelijker

Multimonitor is relax :P