Probleem met onzichtbare klikbare overlay - Softwareontwikkeling

dinsdag 21 oktober 2008 23:07

Acties:

Verwijderd

Topicstarter

Ik ben bezig met een soort bewegende banner bestaande uit HTML en Javascript. Geen plaatje, Flash of Silverlight dus. Wat ik nu wil is dat het geheel klikbaar is, dus alle tekst en tussenliggende ruimte.

Mijn idee is om een overliggende div te maken met een hogere z-index maar verder transparant. Deze overliggende div is dan klikbaar, terwijl alle onderliggende inhoud zichtbaar is. Ik heb met de volgende CSS dit in FireFox aan de praat gekregen:

Cascading Stylesheet:

div.Link
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 468px;
    height: 60px;
    cursor: pointer;
    z-index: 10;
}

Echter dit werkt in IE niet. Deze div.Link is normaal gesproken leeg, maar als ik er voor de test tekst erin zet, dan is deze tekst klikbaar in IE, maar de rest niet.

Is hier een workaround voor dat dit in IE werkt, of moet ik een totaal andere aanpak nemen?

[ Voor 11% gewijzigd door Verwijderd op 21-10-2008 23:11 ]

dinsdag 21 oktober 2008 23:51

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Waarom een overlay met absolute positioning en zindex geklooi en gebruiken als je gewoon de cursor op de container kunt zetten?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>MyAd</title>
        <style type="text/css">
            .banner {
                cursor:pointer;
                border:1px solid red;
                display:block;
            }
        </style>
    </head>
    
    <body>
            <div class="banner" onclick="return window.open('http://www.google.com');">
                <h1>Some header</h1>
                <p>Some content</p>
                <p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="276" height="110" alt="some logo"></p>
            </div>
    </body>
</html>

[ Voor 79% gewijzigd door RobIII op 21-10-2008 23:53 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 21 oktober 2008 23:55

Acties:

Bozozo

Your ad here?

Als je overlay transparant is dan klik je er dwars doorheen in IE. De makkelijkste oplossing is om hem een background color te geven en een opacity van 0.

TabCinema : NiftySplit

woensdag 22 oktober 2008 18:28

Acties:

Mastermind

Hmm doet me denken aan skimming sites die in kleine IFRAMES transparante overlays over de controls op de originele site geplakt hebben, en zo mouseclicks e.d. kunnen ondervangen.

woensdag 22 oktober 2008 18:38

Acties:

Verwijderd

Topicstarter

Het is gelukt met Roblll's oplossing. Ik dacht te moeilijk; er was inderdaad geen overlay nodig. Ik hebt nu een pointer cursor op de container div, en vang het click event hiervan af. Ik dacht dat dat click event niet doorgegeven wordt als je klikt op de inhoud in de container div, maar dat werkt blijkbaar wel.

Bozozo's oplossing werkt niet in IE7; deze ondersteunt geen opacity.

Bedankt voor jullie inbreng.

Mastermind schreef op woensdag 22 oktober 2008 @ 18:28:
Hmm doet me denken aan skimming sites die in kleine IFRAMES transparante overlays over de controls op de originele site geplakt hebben, en zo mouseclicks e.d. kunnen ondervangen.

Dat is toevallig niet het doel

Tis een banner met live sportuitslagen die linkt naar de evenementensite van dat sporttoernooi.

woensdag 22 oktober 2008 20:12

Acties:

Bozozo

Your ad here?

Verwijderd schreef op woensdag 22 oktober 2008 @ 18:38:
Bozozo's oplossing werkt niet in IE7; deze ondersteunt geen opacity.

In IE moet je een directX filter gebruiken voor opacity: filter:alpha(opacity=50)

TabCinema : NiftySplit

donderdag 23 oktober 2008 09:21

Acties:

Bosmonster

*zucht*

Bozozo schreef op dinsdag 21 oktober 2008 @ 23:55:
Als je overlay transparant is dan klik je er dwars doorheen in IE. De makkelijkste oplossing is om hem een background color te geven en een opacity van 0.

Nadeel is dat je dan de inhoud ook niet meer ziet

Wat je kunt doen dan is een transparant gifje als achtergrond afbeelding instellen.

donderdag 23 oktober 2008 11:54

Acties:

Bozozo

Your ad here?

Ik had het over de overlay hè. Daar zit als het goed is geen inhoud in

TabCinema : NiftySplit