hey,
ik zit weer met een probleem, mijn images zijn mouseover images dus als je met je muis eroverheen gaat komt er een andere image, maar deze images moeten transparency zijn dit doe je met behulp van een java script atans zo heb ik het gedaan maar als ik wil dat die images moudeover worden doet mn transparency het niet, logich want het java script ziet de images niet omdat ze in css staan want mouseover doe je met behulp van css (zie code) heeft iemand een idee hoe ik dit kan oplossen ?

dit is het java script

Code:

<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText 
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>

dit is de css .

Code:

a.image { 
display: block; 
width: 125px; 
height: 130px; 
background-image: url(afbeeldingen/home.png); 
background-repeat: no-repeat;
} 
a.image:hover { 
background-image: url(afbeeldingen/homekleur.png); 
}

en dit is de html waar de images komt.

Code:

<td class="green"class="image"><a class="image" href="#"></a></td>

Bedankt!

Edit Bram Lodens: gelieve code tussen code-tags te zetten

Misschien is het mogelijk met transparante gifs ?
Een andere oplossing kan zijn om de hover dmv javascript op te vangen (onmouseover en onmouseout). Dan werkt je transparantie-script wel denk ik.

Of je kan het in Flash maken indien je dit kan ...

Je kan ook een overlay doen op je td.Maar persoonlijk zou ik het doen op je link zélf, aangezien je dan niet zo moet zitten prutsen met suckerfish hover etc. (lees: een javascript manier om ook IE de :hover te laten ondersteunen).

Je kan dan mbv css op dat overlayend element transparency toepassen.

Je zou bvb in die <a> met een position:relative, een text-align:left en de desbetreffende width en height, een <span> element kunnen zetten met een position:absolute, width:100%,height:100%. Dit <span> element laat je dan leeg, en dan pas je daarop je transparency op toe mbv css. Maakt dan vervolgens zelfs niet uit als je daar dan een gif, jpg of png in zet.

De (invalide, dankzij ie en consoorten) css code om iets transparant te maken is:

Code:

element {
             background: #FFF of #000, naar je wilt, url(....png/jpg of gif) no-repeat top left;
             -moz-opacity: 0.7;
             opacity:.70;
             filter: alpha(opacity=70);
}

Dit kan je dan toepassen op je a:hover.

PS: als je verschillende klassen hebt in css steek je deze in slechts 1 attribuut:
<td class="green"class="image">
wordt dan
<td class="green image">

Origineel gepost door Benjamin Carlier

PS: als je verschillende klassen hebt in css steek je deze in slechts 1 attribuut:
<td class="green"class="image">
wordt dan
<td class="green image">

Tenzij ik een belangrijke ontwikkeling gemist heb, vindt Internet Explorer dat geen goed plan.

@Martijn: aan de hand van een voorbeeld ;-)

Ik zou toch echt zweren dat er iets mee was... Nou ja, in ieder geval goed om te horen Benjamin, zal nog wel eens kijken of ik er wat over kan vinden.

Ok, ik heb het gevonden: CSS2 Multiple Classes op Quirksmode.