[HTML/JAVA/CSS] MouseOver met Opacity Werkt niet - Softwareontwikkeling

maandag 7 augustus 2006 20:57

Acties:

Topicstarter

Beste Forummers,

Ik heb zelf het volgende script in elkaar geknutseld:

HTML:

<style type="text/css">
<!--
.main_albumpic {
    width: 230px;
    height: 230px;
    float: left;
    font-size: 24px;
    text-align: center;
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
}
.main_albumpic_textOFF {
    height: 230px;
    width: 230px;
    display: none;
}
.main_albumpic_textOn {
    background-color: #FFFFFF;
    height: 230px;
    width: 230px; 
    opacity:.25;
    filter: alpha(opacity=25); 
    -moz-opacity: 0.25;
}
-->
</style>
</head>

<body>
<div class="main_albumpic" style="background-image:url(slide5.jpg)">
    <div class="main_albumpic_textOFF" 
        onmouseover="this.className='main_albumpic_textOn'" 
        onmouseout="this.className='main_albumpic_textOFF'">
        Test
        </div>
</div>
</body>
</html>

Hiermee zou ik willen bereiken dat de achtergrond (waar een afbeelding in zit) 25% "lichter" word en een text verschijnt. Er gebeurd echter niks. En ik kan niet vinden waarom niet...

Wie helpt mij?

maandag 7 augustus 2006 21:32

Acties:

user109731

Er gebeurt niks omdat je display:none; gebruikt. Dit zorgt ervoor dat het element niet word weergegeven, onMouseOver en onMouseOut werken er dus ook niet op (er is niets, dus je kunt er ook niet overheen gaan). Wat je bijvoorbeeld kunt doen is een onMouseOver op de image-div zetten:

HTML:

<div class="main_albumpic" style="background-image:url(test.jpg)" onMouseOver="showChildDiv(this)">
    <div class="main_albumpic_textOFF" onmouseout="this.className='main_albumpic_textOFF'">
        Test
    </div>
</div>

Die de onderstaande functie aanroept:

JavaScript:

1
2
3

function showChildDiv(div) {
    div.getElementsByTagName('div')[0].className='main_albumpic_textOn';
}

Bovenstaande code is niet getest, dus er kunnen fouten inzitten

[ Voor 9% gewijzigd door user109731 op 07-08-2006 21:36 . Reden: kromme zin verbeterd ]

maandag 7 augustus 2006 21:46

Acties:

0fbe

Topicstarter

Grote prutser schreef op maandag 07 augustus 2006 @ 21:32:
Er gebeurt niks omdat je display:none; gebruikt. Dit zorgt ervoor dat het element niet word weergegeven, onMouseOver en onMouseOut werken er dus ook niet op (er is niets, dus je kunt er ook niet overheen gaan). Wat je bijvoorbeeld kunt doen is een onMouseOver op de image-div zetten:
HTML:
1
2
3
4
5
<div class="main_albumpic" style="background-image:url(test.jpg)" onMouseOver="showChildDiv(this)">
    <div class="main_albumpic_textOFF" onmouseout="this.className='main_albumpic_textOFF'">
        Test
    </div>
</div>
Die de onderstaande functie aanroept:
JavaScript:
1
2
3
function showChildDiv(div) {
    div.getElementsByTagName('div')[0].className='main_albumpic_textOn';
}
Bovenstaande code is niet getest, dus er kunnen fouten inzitten

Ik kan natuurlijk ook gewoon opacity 100% gebruiken als dat display-none het probleem is (dacht dat dat alleen voor de tekst gold)

Edit: dat werkt dus niet. Het probleem met display-none klopte en is nu gefixed. Nu alleen nog de tekst verbergen.

[ Voor 5% gewijzigd door 0fbe op 07-08-2006 21:50 ]

maandag 7 augustus 2006 21:58

Acties:

user109731

timcooijmans schreef op maandag 07 augustus 2006 @ 21:46:
[...]

Ik kan natuurlijk ook gewoon opacity 100% gebruiken als dat display-none het probleem is (dacht dat dat alleen voor de tekst gold)

Edit: dat werkt dus niet. Het probleem met display-none klopte en is nu gefixed. Nu alleen nog de tekst verbergen.

Opacity op 1 zetten zou ook moeten werken, dat is idd wat sneller met de code die je al had. Dan heb je wel weer het probleem dat de tekst nog verborgen moet worden, dat kan met iets als font-size:0;, maar je kan ook de tekst in een span zetten, en dan zoiets doen:

Cascading Stylesheet:

1 2	.main_albumpic_textOn span { visibility:visible; } .main_albumpic_textOff span { visibility:hidden; }

[ Voor 4% gewijzigd door user109731 op 07-08-2006 22:02 ]