Plaatje veranderen bij mouseover

Status
Niet open voor verdere reacties.
A

Annelieke

Gebruiker
Lid geworden
20 apr 2012
Berichten
20
Ik heb een aantal plaatjes die naast en onder elkaar gezet moeten worden, zonder spaties of andere ruimtes ertussen. Tegen elkaar aan dus, wat je normaal gesproken ook krijgt als je een gewone <img src><img src> naast elkaar zet zonder iets ertussen.

Normaal, ja, want ik wil sommige van die plaatjes laten veranderen als je er met je muis overheen gaat. Dit kan met JavaScript, maar dan krijg ik dus witte stukjes, hetzelfde als een spatie, en selecteerbaar als een spatie, tussen de plaatjes. Ze moeten echt tegen elkaar aan.

Mijn vraag is dus: is het, op welke manier dan ook, mogelijk om een plaatje bij een mouseover te veranderen zonder dat er een spatie voor of na het plaatje komt?
 
Laatst bewerkt:
bij mij doet hij dit niet hoor

test.php
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="hover.js" type="text/javascript"></script>

</head>

<body onload="MM_preloadImages('images/Cisco-Logo_0.jpg')">
<a href="http://localhost" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/Cisco-Logo_0.jpg',1)"><img src="images/access-denied.png" alt="s" name="Image1" width="570" height="563" border="0" id="Image1" /></a>
</body>
</html>
hover.js
Code: 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}// JavaScript Document
 
Hoi Annelieke,
Ja, het kan met javascript zonder ruimtes ertussen. Het kan ook zonder javascript, met alleen css. Dat is meestal veel handiger.


  • Voorbeeld: de images van het menu hier helemaal bovenaan op deze testpagina.
    Dit zijn allemaal "css-hovers".
    En alle afbeeldingen en hun hover-varianten zitten in één combinatie-image, dat beresnel op scherm staat.

Maar hoe ziet jouw code er uit? Kan je een link geven naar een online (test)pagina?

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

Nieuwste berichten

Terug
Bovenaan Onderaan