[CSS] a:hoover bij <IMG> mogelijk? - Softwareontwikkeling

dinsdag 3 augustus 2004 19:44

Acties:

Verwijderd

Topicstarter

Heb verschillende thumbnails die een grotere weergave laten zien na een muisknop. Nu wil ik graag dat bij een onMouseOver event de CSS property "filter: Xray;" werkt.

code:

.fotos {
    border-width:1px;
    border-style:dashed;
    border-color:#FF3300;
    filter: Xray;   
}

Het leek eerst simpel te zijn, gewoon met a:link, a:hoover, a:active en a:visited werken... maar niet dus

Heeft iemand een idee of dit uberhaupt wel mogelijk is met CSS of moet ik met twee verschillende afbeeldingen werken?

dinsdag 3 augustus 2004 19:45

Acties:

Tux

Naar mijn weten heet dat hoover van jou nog altijd hover

En je moet iets doen in de zin van:

code:

1	[img]"spef.jpg"[/img]

[ Voor 53% gewijzigd door Tux op 03-08-2004 19:47 ]

The NS has launched a new space transportation service, using German trains which were upgraded into spaceships.

dinsdag 3 augustus 2004 20:11

Acties:

crisp

Devver

Pixelated

in IE werkt hover alleen op anchors, in echte browsers werkt het ook op andere elementen, maar met een IE-only filter helpt je dat niet echt

Intentionally left blank

dinsdag 3 augustus 2004 21:15

Acties:

zubauza

Verwijderd schreef op 03 augustus 2004 @ 19:44:
Het leek eerst simpel te zijn, gewoon met a:link, a:hoover, a:active en a:visited werken... maar niet dus Heeft iemand een idee of dit uberhaupt wel mogelijk is met CSS of moet ik met twee verschillende afbeeldingen werken?

FYI het is a:hover dus met 1 o

deviantART gallery

dinsdag 3 augustus 2004 21:27

Acties:

Johnny

ondergewaardeerde internetguru

Het kan ook zonder onmouseover, dan moet je een <a> er omheen zetten, wat je waarschijnlijk toch wel wilt bij eenthumbnail.

De truuk om het te laten werken is dat je de <a> een breedte of hoogte moet opgeven in MSIE, anders werkt het niet.

HTML:

<head>
<style type="text/css">

a#test:hover {
filter: xray;
width:auto;
}

</style>
</head>

<body>
<a href="" id="test">[img]"classroom.jpg"[/img]</a>
</body>

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 3 augustus 2004 23:31

Acties:

Switch

Als je het :hover element om andere dingen dan alleen anchors (<a>) wil laten werken moet je dit eens even lezen (Was van een GoT'er, toch?). Ik heb het zelf nooit uitgeprobeerd/uitgebreid gelezen dus kan niet 100% zeker zeggen dat het werkt

Maar het is het proberen waard lijkt me.

_{Of sla ik nu de plank mis? Ik ben er de laatste paar dagen niet helemaal bij volgens mij}

[ Voor 16% gewijzigd door Switch op 03-08-2004 23:32 ]

dinsdag 3 augustus 2004 23:32

Acties:

Verwijderd

is van Clay en werkt 100%

dinsdag 3 augustus 2004 23:57

Acties:

Spruit_elf

Intentionally left blank

*kuch*
[google=IE7]

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 4 augustus 2004 00:30

Acties:

Blaise

mrcactus schreef op 03 augustus 2004 @ 23:57:
*kuch*
[google=IE7]

Zwaar overdreven om hiervoor een script van 45kb te gebruiken.

woensdag 4 augustus 2004 09:32

Acties:

Verwijderd

Kun je niet gewoon

code:

1	a:hover img { ... }

als selector gebruiken?

woensdag 4 augustus 2004 09:44

Acties:

zubauza

hiermee is het toch gewoon opgelost?

HTML:

1	<div id="div_image"><a>[img]"blah"[/img]</a>

Cascading Stylesheet:

1	#div_image a:hover { filter: Xray; }

[ Voor 27% gewijzigd door zubauza op 04-08-2004 09:46 ]

deviantART gallery

woensdag 4 augustus 2004 10:43

Acties:

André

Analytics dude

zubauza schreef op 04 augustus 2004 @ 09:44:
hiermee is het toch gewoon opgelost?
HTML:
1
<div id="div_image"><a>[img]"blah"[/img]</a>
Cascading Stylesheet:
1
#div_image a:hover { filter: Xray; }

Oh ja? Hoe werkt dat dan? Bij mij in IE6 gebeurd er niets, is ook wel een ranzige oplossing op deze manier.

woensdag 4 augustus 2004 10:50

Acties:

zubauza

André schreef op 04 augustus 2004 @ 10:43:
Oh ja? Hoe werkt dat dan? Bij mij in IE6 gebeurd er niets, is ook wel een ranzige oplossing op deze manier.

nee bij mij doet de filter x-ray sowieso niets...

deviantART gallery

woensdag 4 augustus 2004 11:01

Acties:

MAher

.. far and free ...

Met mijn beperkte kennis denk ik dat je te maken hebt met 2 dingen:

1. hover werkt in IE alleen met bepaalde elementen (anchors).
2. Je filter is IE only dus ookal heb je een in 'echte browsers' (wie verzon dat?) werkend hover effect, je filter werkt dan niet. Andersom werkt de hover dus niet maar je filter wel. Of zo.

Je moet waarschijnlijk een IE-hack uitvoeren om de hover te laten werken. Javascriptje of zo. Op bijvoorbeeld Zeldman.com hebben ze het er geregeld over (voor mousover menuutjes e.d. met css)

System | Suomalaiset Lehmät.

woensdag 4 augustus 2004 11:05

Acties:

André

Analytics dude

zubauza schreef op 04 augustus 2004 @ 10:50:
[...]

nee bij mij doet de filter x-ray sowieso niets...

duh

woensdag 4 augustus 2004 11:07

Acties:

disjfa

be

MAher schreef op 04 augustus 2004 @ 11:01:
Je moet waarschijnlijk een IE-hack uitvoeren om de hover te laten werken. Javascriptje of zo. Op bijvoorbeeld Zeldman.com hebben ze het er geregeld over (voor mousover menuutjes e.d. met css)

Sinds wanneer is een javascriptje een IE hack

offtopic:
Altijd maar IE hacks gillen terwijl 90% van de dingen die mensen willen gewoon normale code is. Is het in om tegenwoordig alleen maar hacks te gillen

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 4 augustus 2004 11:12

Acties:

MAher

.. far and free ...

disjfa schreef op 04 augustus 2004 @ 11:07:
[...]

Sinds wanneer is een javascriptje een IE hack

offtopic:
Altijd maar IE hacks gillen terwijl 90% van de dingen die mensen willen gewoon normale code is. Is het in om tegenwoordig alleen maar hacks te gillen

Ehm... volgens mij is wat die jongen wil iets wat je dus (onder IE, de rest snapt het wel) niet met de normale huis-tuin- en keuken css + html kan. En dan noemen we het toepassen van een javascriptje (bekijk de link van Switch eens) gewoon een hack.

Trouwens dat noem ik niet alleen maar ook A list Apart en Zeldman... en dat zijn niet zo maar de eersten de besten.

Ok maar een IE-rest discussie was niet de bedoelingks van dit topic geloof ik

System | Suomalaiset Lehmät.

woensdag 4 augustus 2004 11:15

Acties:

Verwijderd

De volgende code is getest onder WXP/IE6-SP1 en werkt perfect:

code:

<html>
    <head>
        <style>
            a img {
                border: 0px;
            }

            a:hover img {
                filter: Xray;
            }
        </style>
    </head>
    <body>
        <div>Een plaatje, klik voor greuter:</div>
        <a href="nag.gif">[img]"nag.gif"[/img]</a>
    </body>
</html>

woensdag 4 augustus 2004 15:29

Acties:

1st_Ro

En eventueel 2 classes aanmaken en dan in je HTML:

code:

1	<a href="link.htm">[img]"plaatje.jpg"[/img]</a>

en als CSS :

code:

img.xray {
filter: xray();
}

img.noxray {
}

Dit doe ik even uit mijn hoofd en ik kan het hier niet testen (zit op mijn werk

)
Probeer het uit zou ik zeggen

En sorry voor het versjteren van de layout ...

[ Voor 20% gewijzigd door 1st_Ro op 04-08-2004 15:30 ]