Beste SD'ers,

ik als coding-amateur ben bezig een heel simpele pagina op te zetten maar ik kan ergens maar niet de goede oplossing voor vinden. Ik wil graag een menu wat uit images bestaat een hover geven,
Deze hover zal een PNG van zelfde formaat zijn met een lichte transparantie!

Dit is de code voor het menu:

Code:

<div id="leftmenu">
                <ul class="menu">
                        <li><a href="#"><img src="images/menu_10.jpg"/></a></li>
                        <li><a href="#"><img src="images/menu_11.jpg"/></a></li>
                        <li><a href="#"><img src="images/menu_12.jpg"/></a></li>
                </ul>
            </div>

en dit tot nu toe de enige CSS voor dit menu:

Code:

#leftmenu * {list-style:none; border:0; padding:0;margin:0;}

Heb al van alles geprobeerd maar kom er maar niet uit,
voor echte coders moet dit 2 sec. werk zijn.

Zou dit werken?

Code:

#leftmenu li:hover {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
	}

Waarom doe je afbeeldingen in de html van het menu?
Als elke afbeelding van het menu anders is kan je beter dit doen:

PHP Code:

<div id="leftmenu">
            <ul class="menu">
                        <li><a class="link1" href="#">link 1</a></li>
                        <li><a class="link2" href="#">link 2</a></li>
                        <li><a class="link3" href="#">link 3 </a></li>
                </ul>
            </div> 


En dan hover als volgt in css:

.link1 hover: {blablabla}

Zo doe ik het altijd, als ik bij elke menu item een andere afbeelding heb!

Maak dit van je HTML code:

Code:

<div id="leftmenu">
    <ul class="menu">
            <li><a href="#" rel="menu_10"><img src="https://www.sitedeals.nl/images/menu_10.jpg" /></a></li>
                <li><a href="#" rel="menu_11"><img src="https://www.sitedeals.nl/images/menu_11.jpg" /></a></li>
                <li><a href="#" rel="menu_12"><img src="https://www.sitedeals.nl/images/menu_12.jpg"  /></a></li>
        </ul>
</div>

Plaats vervolgens de jQuery library op je pagina:

Code:

<script scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

en plaats deze code in een js file:

Code:

$(document).ready(function() {
    $('.menu li a').hover(
        var image = $(this).attr('rel');
          function () {
                $('img', this).attr('src', 'https://www.sitedeals.nl/images/' + image + '_hover.png');
          },
          function () {
                $('img', this).attr('src', 'https://www.sitedeals.nl/images/' + image + '.png');
          }
    );
});

is niet getest, zorg ervoor dat je menu plaatjes even de .png extensie krijgen en dat je de hover plaatjes de naam 'menu_10_hover.png' geeft en houd er rekening mee dat je even die rel="" toevoegt.

Dit is een mogelijk manier, waarschijnlijk nog 100-en-1 andere mogelijkheden.

Diego,

ik denk dat je al een stapje te ver denkt. Het moet gewoon een Hover worden met een PNG, de PNG zelf heeft al een verlaagde opacity, enige at ik dus wil weten is de juiste(!) code voor een hover (met een PNG) over mijn menu

EDIT:

@Patrick, geprobeerd, maar doet het niet, denk dat het wat te maken heeft met het feit dat mijn menu items images zijn, en geen tekst, dit heb ik geprobeerd:

Code:

<div id="leftmenu">
                <ul class="menu">
                        <li class="left"><a href="#"><img src="images/menu_03.jpg"/></a></li>
                        <li class="left"><a href="#"><img src="images/menu_05.jpg"/></a></li>
                        <li class="left"><a href="#"><img src="images/menu_06.jpg"/></a></li>
                </ul>
</div>

met CSS:

Code:

.left hover: {background:url(images/hover.png);}

Origineel gepost door Tim Hazekamp

Diego,

ik denk dat je al een stapje te ver denkt. Het moet gewoon een Hover worden met een PNG, de PNG zelf heeft al een verlaagde opacity, enige at ik dus wil weten is de juiste(!) code voor een hover (met een PNG) over mijn menu

Aah ok! Ik dacht dat je het huidige plaatje wilde vervangen door exact hetzelfde plaatje, met wat transparancy..

Je kunt eens in de source kijken van de homepage van http://www.newslocker.nl/, hier heb ik iets soortgelijks gedaan.

Of een van de andere antwoorden proberen die inmiddels zijn geplaatst ;)

iemand? zie mijn oplossing hierboven :)

Je html vervangen door:

Code:

<div id="leftmenu">
    <ul class="menu">
        <li><a href="#" class="link1">linknaam</a></li>
        <li><a href="#" class="link2">linknaam</a></li>
        <li><a href="#" class="link3">linknaam</a></li>
    </ul>
</div>

vervolgens je css aanpassen naar:


bij de css '.menu li a', dient de breedte en hoogte van de link nog te worden gedefinieerd. (hier is er vanuit gegaan dat de afbeeldingen allemaal net zo groot en breed zijn.)

Code:

css:


.menu li a{
 width: aantal px;
 height: aantal px;
 display:block;
text-indent:-9999px; //zorgt ervoor dat de text 'linknaam' niet wordt getoond 
}

.link1{  background: url('images/menu_10.jpg') no-repeat 0 0;  }
.link1:hover{ background:url('images/menu_10_hover.jpg') no-repeat 0 0;}
.link2{  background: url('images/menu_11.jpg') no-repeat 0 0;  }
.link2:hover{ background:url('images/menu_11_hover.jpg') no-repeat 0 0;}
.link3{  background: url('images/menu_12.jpg') no-repeat 0 0;  }
.link3:hover{ background:url('images/menu_12_hover.jpg') no-repeat 0 0;}

etc..

als je css bestand in de zelfde map staat als de index.html dan is het bovenstaande van toepassing.
Anders dient er voor de images/... een '../' geplaatst te worden, zoals het voorbeeld hieronder:
.link1{ background: url('../images/menu_10.jpg') no-repeat 0 0; }

succes!

edit: misschien heb je hier ook wat aan, dit geeft een idee van de werking van de background-images: http://tinyurl.com/ca87uba
video: http://tinyurl.com/cteu34s

ik ga het proberen, bedankt!

Volgens mij als de de tekst "linknaam" weglaat uit Melvin's voorbeeld dan kan je de text-indent achterwege laten, de img komt immers in de plaats voor de text.

Wat je ook kan doen om het geheel minder zwaar te maken en geen gedoe met classes te hebben, plaats een filter, een klein blokje in photoshop maken dat transparant is hierdoor creeer je hetzelfde effect als een extra afbeelding, je kan ook zelf bepalen welke kleur filter je er overheen legt. Dat filter plaats je dan als background image bij "a hover"

Succes!

@Jan Willem,

Wat betreft het weglaten van de "linknaam", dit is correct. SEO technisch is dit volgens mij echter wel beter.

Persoonlijk zou ik normaal gesproken image sprites gebruiken (als er uberhaupt afbeeldigen gebruikt dienen te worden), maar goed om mee te beginnen is dit denk ik een goede werkwijze..

Het is gelukt! Met een kleine omweg maar dankzij de methode van Melvin heb ik het opgelost :)

@melvin, een alt tekst toevoegen dan een oplossing zijn.

mee eens, sprites gebruiken is beter.