Rollover img. met zo min mogelijk code - Softwareontwikkeling

woensdag 17 oktober 2001 20:48

Acties:

Verwijderd

Topicstarter

Ik wil een image rollover maken, nu weet ik dat er 1001 manieren zijn om dat op te lossen maar hoe kan ik er nou 1 maken met zo min mogelijk code? zodat mijn bestanden niet vol komen te zitten met onnodige source vervuiling..

woensdag 17 oktober 2001 21:41

Acties:

Verwijderd

Dit maakt DW ervan, is clean zoals ik het nu zie,

in head:

code:

<script language="JavaScript">
<!--
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];}
}
//-->
</script>

En je rollover:

code:

1	<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','2007.gif',0)">[img]butter.gif"[/img]</a>

Is zeker niet kort, zitten veel dingen in die jij niet nodig hebt. Maar tis een begin, hierna kunnen ze alleen maar korter worden

woensdag 17 oktober 2001 21:49

Acties:

OkkE

CSS influencer :+

Op woensdag 17 oktober 2001 20:48 schreef tuup het volgende:
zo min mogelijk code?

Op woensdag 17 oktober 2001 21:41 schreef Necromancy het volgende:
Dit maakt DW ervan, is clean zoals ik het nu zie,

Dreamweaver maakt er toch wel meer code van als perse nodig is hoor. Maar zo min mogelijk weet ik ook ff niet uit me hoofd...

// EDIT:

Ah, hier issie:

code:

<head>
<script language="javascript">
compat = false;
if( parseInt( navigator.appVersion ) >= 3 ) { compat = true; }
if( compat )
{
abouton = new Image;(165,41)
abouton.src = "pics/menu01a.jpg";
aboutoff = new Image;(165,41)
aboutoff.src = "pics/menu01.jpg";
}
</head>

<body>
<a href="about.html" target="main" onmouseover="glow('about', 'abouton')" onmouseout="glow('about', 'aboutoff')">
[img]"pics/menu01.jpg"[/img]</a>

Maar dat is zonder pre-load volgens mij. Het werkt iig wel in Opera, NS en IE.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 17 oktober 2001 21:51

Acties:

Tim

Is natuurlijk wat je zelf wil, in princiepe kan je een roll over van 2 regeltjes maken, maar dan moet je wat meer per img gebruiken

code:

function SwapTo(img, object) {
  object.src = img; // Dit hoor je eigenlijk niet te gebruiken ;) maar ik vergeet dat andere telkens :o
}

<img onMouseOver="SwapTo('blaat.jpg', this)" onMouseOut="SwapTo('blaat2.jpg', this)">

In IE is dit ook wel lol, weet niet of het ergens anders ook werkt:

code:

function Swap(obj) {
  if (obj.src = obj.Org) obj.src = obj.Over;
    else obj.src = obj.Org; 
}
<img onMouseOver="Swap(this)" onMouseOut="Swap(this)" Org="blaat1.jpg" Over="blaat2.jpg">

woensdag 17 oktober 2001 22:26

Acties:

TheDude

Deze is de korste die ik ken...

code:

1	<head><script>function o(i){t=i.src;i.src=i.lowsrc;i.lowsrc=t}</script></head>

En dan voor de rollover:

code:

1	<a href="blabla.html" onMouseOver="o(blabla1)" onMouseOut="o(blabla1)">[img]"1.gif"[/img]</a>

En als je meer dan 1 rollover hebt wordt de volgende:

code:

1	<a href="blabla2.html" onMouseOver="o(blabla2)" onMouseOut="o(blabla2)">[img]"3.gif"[/img]</a>

Enz.

Volgens mij kan ie niet korter....

donderdag 18 oktober 2001 00:29

Acties:

Verwijderd

Topicstarter

Dat script van theDude ziet er leuk uit maar moet ik niet
blabla1 defineren? ik krijg nu namelijk een error...

donderdag 18 oktober 2001 02:22

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

<a href="blabla.html" onMouseOver="o(document.images['blabla1'])"
onMouseOut="o(document.images['blabla1'])">[img]"1.gif" lowsrc="2.gif"></a[/img]

leuk script maar betwijfel of ik het zo zou toepassen, immers de onmouseover is wel opeens een stuk groter

code:

<script>
function o(i){
i=document.images[i];t=i.src;i.src=i.lowsrc;i.lowsrc=t
}
</script>

zou al wat praktischer zijn (wat extra returns wegens leesbaarheid, maar kan je verwijderen)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 18 oktober 2001 02:28

Acties:

Verwijderd

In hemelsnaam, zooek!:'(
Het hele I-net staat er vol mee...

donderdag 18 oktober 2001 08:31

Acties:

Verwijderd

Ik gok dat dit de kortste is mensen;

code:

1 2	[img]'auto2.jpg';" OnMouseOut="auto.src='auto.jpg';"[/img]

donderdag 18 oktober 2001 09:39

Acties:

drm

f0pc0dert

Op donderdag 18 oktober 2001 08:31 schreef ivy het volgende:
Ik gok dat dit de kortste is mensen;
code:
1
2
[img]'auto2.jpg';"
OnMouseOut="auto.src='auto.jpg';"[/img]

how about preloading? Modemers gaan verrot trage mouseovers krijgen, zo...

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 18 oktober 2001 09:47

Acties:

Blue-eagle

Op donderdag 18 oktober 2001 09:39 schreef drm het volgende:

[..]

how about preloading? Modemers gaan verrot trage mouseovers krijgen, zo...

Tja, een kleine reload in een extern .js bestand kan helpen, of de plaatjes laden in een hidden layer

Maar wat is er mis met een groot javascript in een .js bestand? Dat houd de boel nog lekker centraal ook...

donderdag 18 oktober 2001 11:23

Acties:

Verwijderd

> Preloading

Je hebt in eerste instantie gelijk. Ten tweede wil ik toevoegen dat ik nooit rollovers maak waarbij de afbeeldingen groter zijn dan 5kB. Als je grotere afbeeldingen gebruikt wordt het allemaal zowieso sloom. En als je mijn methode gebruikt zoner preloading en met afbeedlingen van 5kb max. dan is er geen vuiltje aan de lucht en heb je een code die je met een microscoop moet zoeken wil die opvallen in een broncode...

hehe..

Greetz

donderdag 18 oktober 2001 11:58

Acties:

Verwijderd

Topicstarter

Op donderdag 18 oktober 2001 08:31 schreef ivy het volgende:
Ik gok dat dit de kortste is mensen;
code:
1
2
[img]'auto2.jpg';"
OnMouseOut="auto.src='auto.jpg';"[/img]

I'll love it!

Das echt lekker kort, en mijn rollovers zijn maximaal 110bytes dus preloaden my ass

donderdag 18 oktober 2001 13:45

Acties:

drm

f0pc0dert

Op donderdag 18 oktober 2001 11:23 schreef ivy het volgende:
> Preloading

Je hebt in eerste instantie gelijk. Ten tweede wil ik toevoegen dat ik nooit rollovers maak waarbij de afbeeldingen groter zijn dan 5kB. Als je grotere afbeeldingen gebruikt wordt het allemaal zowieso sloom. En als je mijn methode gebruikt zoner preloading en met afbeedlingen van 5kb max. dan is er geen vuiltje aan de lucht en heb je een code die je met een microscoop moet zoeken wil die opvallen in een broncode... hehe..

Greetz

56k6 modem: = ca. 5500 bytes/s. Oftewel elk plaatje kost 1 seconde om te laden. Wedden dat ik geen 1 seconde over een mouseover doe?

Als je dan een paar mouseovers achter elkaar/onder elkaar hebt staan, en ik doe mouseover, dan komt het plaatje pas als ik er al lang weer vanaf ben met mijn muis (1 seconde later namelijk), dus dan wordt het eerder een halfzachte mousetrailer ofzo.

Op donderdag 18 oktober 2001 11:58 schreef tuup het volgende:

[..]

I'll love it!
Das echt lekker kort, en mijn rollovers zijn maximaal 110bytes dus preloaden my ass

110 bytes is niet echt boeiend om te preloaden idd

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz