afbeelding mouse over

Status
Niet open voor verdere reacties.
V

VIPhotography

Gebruiker
Lid geworden
8 mei 2011
Berichten
10
Hallo allemaal,

Ik kom er weer niet uit. Ik heb een afbeelding en als men daar dan over heen gaat met de muis wil ik dat er een "witte waas" overheen komt.. Nu heb ik van de afbeelding al een kopie gemaakt met die "witte waas". Alleen, hoe krijg ik dat nou op mijn website?! Wat is de html code. Of is het mogelijk een css code aan te maken dat er automatisch bij alle afbeeldingen met koppeling een "witte waas" komt.
Ik werk met Adobe Go Live CS2...

En om voor de duidelijk even te laten zien wat ik bedoel: http://www.liebens.info/?page_id=533

Ik hoop dat jullie me kunnen helpen...

Groet,
Irina
 
Laatst bewerkt:
Hallo,

ik heb de site die u noemt even bekeken en deze maakt gebruik van JQuery (een JavaScript library), en dat doen ze zo:

HTML: 
<html>
<head>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script><!-- de jquery library includen -->
<script language="JavaScript" type="text/javascript">
[JS]//dit script heb ik vrijwel letterlijk van de site gekopieerd
var $j = jQuery.noConflict();
$j(function () {
$j(document).ready(function(){
$j(".thumb").hover(function(){ //thumb is gewoon een class name die je zelf kan bepalen, maar let erop dat deze overeen komt met de class in het plaatje
$j(this).fadeTo("slow", 0.6); // This should set the opacity to 60% on hover
},function(){
$j(this).fadeTo("slow", 1.0); // This should set the opacity back to 100% on mouseout
});
});
});[/JS]
HTML: 
</script>
</head>
<body>

<img src="http://hulplijn.com/logo_helpmij.jpg" class="thumb"> <!-- Je moet bij de class attribute thumb zetten als je dat bij je script ook hebt -->
</body>
</html>

(je moet die 3 stukjes gewoon onder elkaar zetten, maar ik heb ze nu even gesplitst omdat het verschillende talen zijn)

mvg rowano
 
Hoi Irina,
Het viel me op dat er bij de afbeeldingen-links op die pagina geen aanwijshandje verschijnt als je er met de muis overheen gaat. En de thumbnails reageren ook al niet op klikken. Het lijkt wel alsof er een onzichtbaar transparant laagje overheen zit, waar je niet doorheen kunt prikken.

Dat blijkt te kloppen! In het stylesheet style.css staat op regel 274: #content { z-index: -1}.
Nu zitten de afbeeldingen-links via-via in die #content-container, en een z-index is voor de stapeling van laagjes op elkaar. De normale laag waarin de pagina staat heeft een z-index: 1. Maar hier zit de #content daar dus 1 laag onder ... en is daarmee niet bereikbaar.
Dus die z-index van -1 kan er gewoon uit (in elk geval op deze pagina).

Dat heb ik even met de Developer Toolbar online uitgeprobeerd, en dat blijkt te werken. De links worden dan hoverbaar en klikbaar, en het muisaanwijzer-handje verschijnt ook zoals het hoort.

Maar ... wie schetst mijne oprechte verbazing ende grootschalige verwondering, alsof ik het in Keulen hoorde donderen? :shocked:

Want wat gebeurt er zomaar helemaal vanzelf als je over 1 van de 4 afbeeldingen muist?
Dat had ik niet kunnen verzinnen ... er hoeft helemaal geen "witte waas-afbeelding" in gezet te worden, die komt automatisch en verdwijnt ook weer automatisch!
Alles zit (momenteel) al in het custom.js javascript.
:)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan