[CSS & IE7] hover werkt niet op <img>-element? - Softwareontwikkeling

woensdag 22 juli 2009 00:00

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik probeer met de volgende regel in een stylesheet:

img.KImgViewer:hover {cursor:pointer; cursor:hand}

de browser zover te krijgen dat een <img class="KImgViewer"> een 'handje' laat zien als erover 'gehoverd' wordt. IE 7 blijft dit weigeren (cursor:hand speciaal daarvoor toegevoegd), FF doet het wel gewoon. Via google kom ik alleen tegen dat dit zou moeten werken. Hier een blogpost waarin gesteld wordt dat er een doc-type gebruikt moet worden om het aan de slag te krijgen, maar dat heeft me ook niet geholpen.

Is iemand anders hier wel eens tegenaan gelopen?

woensdag 22 juli 2009 00:09

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

En je hebt wel de KImgViewer class op je image staan?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        img.KImgViewer:hover {cursor:pointer;}
    </style>
</head>

<body>
    <p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="276" height="110" alt="Google logo" class="KImgViewer"></p>
</body>
</html>

Dit werkt bij mijn prima onder IE7

En dan is cursor:hand nog overbodig...
Het ontgaat me trouwens ook even waarom je de :hover pseudo class zou willen gebruiken hiervoor?

[ Voor 91% gewijzigd door RobIII op 22-07-2009 00:12 ]

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

woensdag 22 juli 2009 00:34

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Dit werkt toch prima zonder :hover pseudo-class?

:hover werkt in IE (7) alleen op het a-element.

woensdag 22 juli 2009 00:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op woensdag 22 juli 2009 @ 00:09:
En je hebt wel de KImgViewer class op je image staan?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        img.KImgViewer:hover {cursor:pointer;}
    </style>
</head>

<body>
    <p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="276" height="110" alt="Google logo" class="KImgViewer"></p>
</body>
</html>
Dit werkt bij mijn prima onder IE7 En dan is cursor:hand nog overbodig...
Het ontgaat me trouwens ook even waarom je de :hover pseudo class zou willen gebruiken hiervoor?

Je tweede vraag: welke methode zou je dan gebruiken als je een 'handje' over een plaatje wilt zonder een <a ...> te gebruiken?

Je eerste vraag: klopt, jouw voorbeeld werkt bij mij ook gewoon. Op mijn pagina werkt het echter nog steeds niet. Het gaat bij mij om een dynamisch ingevoegd <img>-element, meest relevante deel van de javascript ziet er als volgt uit:

JavaScript:

        //div with photos:
    var div9=document.createElement('div')
    div9.setAttribute('id','div_slideShowPhotos')
    document.getElementById('div_slideShowContents').appendChild(div9)
    var divSty=document.getElementById('div_slideShowPhotos').style
    divSty.position="absolute"
    var widthPhotoStrip=0
    for (var i=startPic; i<=endPic; i++) {
        widthPhotoStrip+=imgArr[i][1]+2*gl_borderWidthPhotosSlideShow+gl_marginWidthPhotosSlideShow
    }
    widthPhotoStrip-=gl_marginWidthPhotosSlideShow
    divSty.width=widthPhotoStrip+'px'
    for (var i=startPic; i<=endPic; i++) {
        var img=document.createElement('img')
        img.setAttribute('id','img_slideShow_' + i)
        img.setAttribute('src',imgArr[i][0] + '_thmb_slideshow.jpg')
        img.setAttribute('class','KImgViewer')
        document.getElementById('div_slideShowPhotos').appendChild(img)
        var imgEl=document.getElementById('img_slideShow_' + i)
        imgEl.style.border='solid ' + gl_borderWidthPhotosSlideShow + 'px black'
        if (i>startPic) {
            imgEl.style.marginLeft=gl_marginWidthPhotosSlideShow+'px'
        }
        imgEl.style.float='left'
        imgEl.onclick=function() { loadPhotos(startPic,endPic,parseInt(this.id.substr(14))) }
    }

in regel 14 wordt het <img>-element aangemaakt, in regel 17 wordt de juiste class gezet. Deze code werkt prima in FF, incl. 'handje' dus, maar IE 7 laat geen 'handje' zien...

woensdag 22 juli 2009 01:04

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

vervang

JavaScript:

1	img.setAttribute('class','KImgViewer')

door

JavaScript:

1	img.className = 'KImgViewer';

setAttribute is br0ken in IE < 8 (en meestal ook overbodig)

Intentionally left blank

woensdag 22 juli 2009 01:05

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

ff offtopic, maar waarom cursor:hand? Die is vanaf IE6 al niet meer nodig.

日本！🎌

woensdag 22 juli 2009 01:11

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

crisp schreef op woensdag 22 juli 2009 @ 01:04:
vervang
JavaScript:
1
img.setAttribute('class','KImgViewer') 
door
JavaScript:
1
img.className = 'KImgViewer';
setAttribute is br0ken in IE < 8 (en meestal ook overbodig)

Bedankt, dat ga ik morgen even proberen.

. Opvallend dat setAttribute('src',...) dan wel werkt in IE 7, is de implementatie dan maar gedeeltelijk gedaan oid?

woensdag 22 juli 2009 01:12

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

_Thanatos_ schreef op woensdag 22 juli 2009 @ 01:05:
ff offtopic, maar waarom cursor:hand? Die is vanaf IE6 al niet meer nodig.

Omdat ik ermee heb zitten klooien om het aan de gang te krijgen, het toevoegen van 'hand' was één van de probeersels.

woensdag 22 juli 2009 01:19

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op woensdag 22 juli 2009 @ 00:56:
Je tweede vraag: welke methode zou je dan gebruiken als je een 'handje' over een plaatje wilt zonder een <a ...> te gebruiken?

Gewoon :hover weglaten

Verwijderd schreef op woensdag 22 juli 2009 @ 00:56:
Je eerste vraag: klopt, jouw voorbeeld werkt bij mij ook gewoon. Op mijn pagina werkt het echter nog steeds niet. Het gaat bij mij om een dynamisch ingevoegd <img>-element

Dat is wel zo handig om te vermelden in je topicstart voortaan

Verwijderd schreef op woensdag 22 juli 2009 @ 01:11:
Bedankt, dat ga ik morgen even proberen. . Opvallend dat setAttribute('src',...) dan wel werkt in IE 7, is de implementatie dan maar gedeeltelijk gedaan oid?

Blijkbaar hè?

In IE8 werkt het (volgens mij, maar ik zie dat crisp het ook al aangeeft) wel goed. Is overigens zat over te vinden.

[ Voor 31% gewijzigd door RobIII op 22-07-2009 01:24 ]

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

woensdag 22 juli 2009 01:26

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op woensdag 22 juli 2009 @ 01:19:
[...]

Gewoon :hover weglaten

[...]

Dat is wel zo handig om te vermelden in je topicstart voortaan

[...]

Blijkbaar hè? In IE8 werkt het (volgens mij, maar ik zie dat crisp het ook al aangeeft) wel goed. Is overigens zat over te vinden.

Erg vriendelijke toon in dit bericht. Het spijt me meneer de moderator dat mijn posts blijkbaar niet aan uw standaarden voldoen.

woensdag 22 juli 2009 01:44

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verwijderd schreef op woensdag 22 juli 2009 @ 01:26:
[...]

Erg vriendelijke toon in dit bericht. Het spijt me meneer de moderator dat mijn posts blijkbaar niet aan uw standaarden voldoen. .

Euh; ik zie daar geen onvriendelijke toon in (en daarbij gebruik ik smileys). Maar als je last hebt van me dan mag je dat melden in Feedback op moderatie binnen de Devschuur. Wellicht dat 't aan 't tijdstip ligt met daarbij opgeteld enige frustratie omdat je met dit probleem zit?

[ Voor 10% gewijzigd door RobIII op 22-07-2009 01:45 ]

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

woensdag 22 juli 2009 02:53

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op woensdag 22 juli 2009 @ 01:44:
[...]

Euh; ik zie daar geen onvriendelijke toon in (en daarbij gebruik ik smileys). Maar als je last hebt van me dan mag je dat melden in Feedback op moderatie binnen de Devschuur. Wellicht dat 't aan 't tijdstip ligt met daarbij opgeteld enige frustratie omdat je met dit probleem zit?

Ik heb geen "last van je" & het is helemaal niet belangrijk genoeg om hiervoor naar Feedback te gaan, ik deel je enkel mede dat je post onvriendelijk (op mij) overkomt, juist ook door de smileys. Nee, ik ben niet gefrustreerd & het ligt ook niet aan het tijdstip, het ligt aan jouw reactie zoals gezegd. Ik hobby af en toe wat in webdesign, niet meer dan dat, ken (dus) niet alle ins en outs, zeker niet waar het compatibiliteit tussen browsers betreft, dus maak ik af en toe vergissingen die op profs. vast onnozel overkomen, maar dat lijkt me geen reden om niet gewoon zakelijk antwoord te geven voor een mod. Als je post in jouw optiek onder 'zakelijk' valt, heb ik blijkbaar last van lichtgeraaktheid. Dat is alles wat mij betreft.

[ Voor 4% gewijzigd door Verwijderd op 22-07-2009 02:58 ]

Pagina: 1

Reageer