Archief - JS/CSS: Verschillende onmouseover in 1 pagina

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Z

Z!zz3r

Legacy Member
Yo de manne ,

Ik zit vast met het volgende >>>>

ik heb 1 knop met een onmouseover en dan verschijnt er bvb nen foto van nen boom over die knop

ik heb een andere knop met een onmouseover en dan verschijnt er bvb nen foto van nen auto over die knop

Vind er op het net nix van, mss wete gelle een oplossing ??
Z

Z!zz3r

Legacy Member
aaah ja ,wilde dan is zo vriendelijk zijn voor nen link te geven ??
T

Tsjernobyl

Legacy Member
Als je met CSS werk zou ik verschillende classes maken per rollover-effect. bv: a.rollover1 en a.rollover2
Dan kan je voor elke class andere 'xx:hover'-eigenschappen geven: zo ook het rollover effect.
s

stoomboot

Legacy Member
Ik heb zelf dagen zitten zoeken voor een fatsoenlijke onmouseover, etc voor css, ma da werkte ni in IE en FF tegelijk, dus heb'k gewoon JS gebruikt met een ellelange code in de html zelf voor iedere afbeelding... Het stomme eraan is da'k voor iedere afbeelding een andere naam moet geve :(

Als ge het moet hebbe, stuur dan maar PM...
Z

Z!zz3r

Legacy Member
Ik heb na lang zoeke dit gevonden >>>

<script type="text/javascript">
temp1=new Image
temp2=new Image
temp3=new Image
temp4=new Image
temp1.src="1.gif"
temp2.src="home.gif"
temp3.src="2.gif"
temp4.src="contact.gif"
</script>

<body>
<div id="knop1">
<a href="Page2.html"><img onmouseover="this.src=temp2.src" onmouseout="this.src=temp1.src" src="1.gif"
border="0" width="34" height="128">
</a>
</div>

<div id="knop2">
<a href="Page2.html"><img onmouseover="this.src=temp4.src" onmouseout="this.src=temp3.src" src="2.gif"
border="0" width="34" height="128">
</a>
</div>
</body>

Ik hoop da gelle der ook iet mee zet of weet er iemand nog iet vele simpeler?
S

Sir Romenov

Legacy Member
iets minder werk:
<img src="images/contact.gif" border="0" name="pic" onMouseOver="src='images/contact_over.gif'" onMouseOut="src='images/contact.gif'" alt="Contact" />
s

stoomboot

Legacy Member
Sir Romenov zei:
iets minder werk:
<img src="images/contact.gif" border="0" name="pic" onMouseOver="src='images/contact_over.gif'" onMouseOut="src='images/contact.gif'" alt="Contact" />
Klik om te vergroten...


<img src="images/contact.gif" border="0" name="pic" onMouseOver="src='images/contact_over.gif'" onMouseOut="src='images/contact.gif'" title="Contact" />


Zo werkt Contact zowel in FF als in IE :p

Ik heb geloof ik ook gewerkt met deze code, maar het stomme was dat als ik over een zo'n tekening ging terwijl de pagina aan't laden was, dan had hij de 1e helft van de tekening niet geladen en zag ge dus zodra ge met uw muis er vanaf ging geen tekening, maar wel zo'n mooi vierkant dat aantoont dat er geen tekening is... :(
T

Tsjernobyl

Legacy Member
Volgens mij heb je dan wel het probleem van preloaden. Nu wordt je image pas geladen als je erover gaat, wat voor irratante vertraging zorgt.

Ik zou het zo oplossen:

EDIT: link verwijderd wegens niet meer correct na overschrijven. Code hieronder is nog juist

HTML: 
<body>

<div class="rollover1"> <a class="rollover1" href="http://www.google.be"> test </a></div>
<div class="rollover2"> <a class="rollover2" href="http://www.google.be"> test </a></div>


</body>
Code: 
/* CSS Document */

div.rollover1
{
    position:absolute;
    height:30px;
    width:100px;
    text-align: center;
    }
    

div.rollover2 {
    position:absolute;
    height:30px;
    width:100px;
    left:100px;
    text-align: center;
    }

a.rollover1 {
    display:block;
    background-image:url(rollover1.jpg);
    height:30px;
    }

a.rollover2 {
    display:block;
    background-image:url(rollover2.jpg);
    height:30px;
    }
    
a:hover {
    background-position: 0 -30px;
    }
Pure CSS. Werkt in IE en Firefox, geen vertraging, geen java. Waarschijnlijk kan mijn code nog wel geoptimaliseerd worden, want ik werk enkel met classes.
s

stoomboot

Legacy Member
Ik heb al lang iets beter gevonden :) Welliswaar wel met javascript, maar het marcheert :)
Toch bedankt :)
En uw code is niet handig indien er meerdere rollovers moete gebruikt worden :s
T

Tsjernobyl

Legacy Member
waarom niet? ik werk hier toch met 2 verschillende rollovers? Je kan er zelf 10 van maken.

linkje naar jouw oplossing?
s

stoomboot

Legacy Member
Bij tien verschillende moet ge toch telkens verschillende css input geven?
Wat het wel lang maakt? :)

Een javascriptje:
Code: 
<!--
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_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_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];}
}
//-->

Per link: (zorg dan wel dat NaamX voor iedere link een andere naam heeft)
Code: 
<a href="link.php" onMouseOver="MM_swapImage('NaamX','','Afbeelding2.jpg',1)" onClick="MM_swapImage('NaamX','','Afbeelding2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img name="NaamX" src="Afbeelding1.jpg" border="0"></a>

en zo moet'k dus alleen het laatste telkens herhalen ;)
Zeer handig...
R

RpR

Legacy Member
nielseke zei:
Bij tien verschillende moet ge toch telkens verschillende css input geven?
Wat het wel lang maakt? :)

Een javascriptje:
Code: 
<!--
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_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_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];}
}
//-->

Per link: (zorg dan wel dat NaamX voor iedere link een andere naam heeft)
Code: 
<a href="link.php" onMouseOver="MM_swapImage('NaamX','','Afbeelding2.jpg',1)" onClick="MM_swapImage('NaamX','','Afbeelding2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img name="NaamX" src="Afbeelding1.jpg" border="0"></a>

en zo moet'k dus alleen het laatste telkens herhalen ;)
Zeer handig...
Klik om te vergroten...
Het is altijd dom van javascript te gebruiken als je het zonder kan.
T

Tsjernobyl

Legacy Member
Als jij Java handiger vind dan moet dat je dat maar gebruiken natuurlijk. Maar De lengte van mijn code is niet echt een storende factor voor mij: Je moet enkel copy-pasten, en de nummer van de rollover veranderen. Bv: rollover1--> rollover2

Ik ken geen java, ik haat het om zo een stuk code in mijn html te steken waarvan ik begot niet weet wat het doet. Ik weet natuurlijk niet hoe dat is jouw geval is.

Let er ook op dat sommige mensen Java-scripts uitschakelen (maar ik denk wel dat die groep bijna te verwaarlozen is)
R

RpR

Legacy Member
Tsjernobyl zei:
Als jij Java handiger vind dan moet dat je dat maar gebruiken natuurlijk. Maar De lengte van mijn code is niet echt een storende factor voor mij: Je moet enkel copy-pasten, en de nummer van de rollover veranderen. Bv: rollover1--> rollover2

Ik ken geen java, ik haat het om zo een stuk code in mijn html te steken waarvan ik begot niet weet wat het doet. Ik weet natuurlijk niet hoe dat is jouw geval is.

Let er ook op dat sommige mensen Java-scripts uitschakelen (maar ik denk wel dat die groep bijna te verwaarlozen is)
Klik om te vergroten...
Code kan wel efficienter door oa bv de gemeenschappelijk css in 1 klasse te zetten en de achtergrond foto per id te doen.

Maar javascript is altijd af te raden als css kan omdat sommige mensen geen javascript kunnen runnen of niet hebben pda's...
T

Tsjernobyl

Legacy Member
@RpR, inderdaad. Ik dacht net ook zoiets:

http://users.pandora.be/assistonline.bvba1/animatietest/2xRolloverTest/test.html

Nu heb ik een simpele ccs code:
Code: 
div.rollover
{
	position:absolute;
	height:30px;
	width:100px;
	text-align: center;
	}
	
a.rollover {
	display:block;
	height:30px;
	}

a.rollover:hover {
	background-position: 0 -30px;
	}

En nu hoef je enkel deze lijn in je HTML te herhalen. Je moet enkel je image-source aanpassen.(net zoals in Java)
HTML: 
<div class="rollover"> <a style="background-image:url(rollover1.jpg)" class="rollover" href="http://www.google.be"> test </a></div>

Nu is het korter en even makkelijk als in java.
s

stoomboot

Legacy Member
Kan u ook die tekeningen onder elkaar zetten zonder een marge en links boven in de hoek zonder een marge?
Ik heb me toen ik die code vroeger gebruikte doodgeërgerd aan die dingen omdat ik die niet geplaatst kreeg zoals ik het wou :(
T

Tsjernobyl

Legacy Member
nielseke zei:
Kan u ook die tekeningen onder elkaar zetten zonder een marge en links boven in de hoek zonder een marge?
Ik heb me toen ik die code vroeger gebruikte doodgeërgerd aan die dingen omdat ik die niet geplaatst kreeg zoals ik het wou :(
Klik om te vergroten...

Dat is dan weer een kwestie van positioneren. Ik ken uw site niet , tables of divs. Maarja zo blijven we bezig.
S

Sir Romenov

Legacy Member
nielseke zei:
<img src="images/contact.gif" border="0" name="pic" onMouseOver="src='images/contact_over.gif'" onMouseOut="src='images/contact.gif'" title="Contact" />


Zo werkt Contact zowel in FF als in IE :p

Ik heb geloof ik ook gewerkt met deze code, maar het stomme was dat als ik over een zo'n tekening ging terwijl de pagina aan't laden was, dan had hij de 1e helft van de tekening niet geladen en zag ge dus zodra ge met uw muis er vanaf ging geen tekening, maar wel zo'n mooi vierkant dat aantoont dat er geen tekening is... :(
Klik om te vergroten...


Das correct da het dan in FF & IE werkt, maar normaal moet uwen alt altijd gespecifieerd zijn, IE doet da gewoon fout, alt is alternatieven text voor als uw afbeelding ni gevonden is (en kdenk ook voor software voor blinden). IE maakt er echter een gewoonte van omda te tonen als ge daar me uw muis over gaat, allemaal goe en wel alst een icoontje is maar irritant in het andere geval.

ps. Preload script usen
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan