mouseover vraag (newbie niveau)

[TutanRamon]

Ik wil het volgende maken:

Ik heb het scherm verdeeld in een aantal vakken mbv tables (uit voorgaande topic, nog bedankt voor de hulp). In het rechtervak staan links, nu wil dat als je daar met je muis over een gaat dan er een plaatje komt in het linkervak.
Ik neem aan dat dit mogelijk is ik weet alleen niet hoe ik dit moet waarmaken.

[XangadiX]

het makkelijkst is een tranparant gifje erin zetten (of in de kleur van de achtergrond) en daar dan een onmouseover event aanhangen

(onMouseOver swapimage... bla)

[TutanRamon]

Op vrijdag 22 juni 2001 14:46 schreef XangadiX het volgende:
het makkelijkst is een tranparant gifje erin zetten (of in de kleur van de achtergrond) en daar dan een onmouseover event aanhangen

(onMouseOver swapimage... bla)

Ik snap wat je bedoeld, maar is er ergens een voorbeeld hiervan ofzo want ik ben nogal 'dom' op het gebied van HTML.

[DizzyWeb]

Met HTML alleen kom je er niet, je zal toch ff moeten gaan zoeken naar JavaScript...

[DeX]

Op vrijdag 22 juni 2001 14:55 schreef DizzyWeb het volgende:
Met HTML alleen kom je er niet, je zal toch ff moeten gaan zoeken naar JavaScript...

Met CSS kan het, Met DHTML kan het en inderdaad met java ook... Zoek een scriptje op het net..

[TutanRamon]

Op vrijdag 22 juni 2001 14:55 schreef DizzyWeb het volgende:
Met HTML alleen kom je er niet, je zal toch ff moeten gaan zoeken naar JavaScript...

Van zo'n 'gewone' mouseover* weet ik wel hoe je dat moet doen, maar met zo'n mouseover die ik bedoel weet ik het niet.
* met gewoon bedoel ik de het plaatje op dezelfde plaats een ander plaatje wordt mbv mouseover.

[TutanRamon]

niemand?

[McVirusS]

Op vrijdag 22 juni 2001 14:58 schreef DeX het volgende:

[..]

Met CSS kan het, Met DHTML kan het en inderdaad met java ook... Zoek een scriptje op het net..

Je hebt werkelijk geen flauw idee waar je het over hebt he (dHTML = HTML + CSS + Javascript)

[TutanRamon]

Op vrijdag 22 juni 2001 14:58 schreef DeX het volgende:
Met CSS kan het, Met DHTML kan het en inderdaad met java ook... Zoek een scriptje op het net..

Dat is zoeken naar een naald in een allemachtige grote hooiberg genaamd internet.

[XangadiX]

Op vrijdag 22 juni 2001 16:00 schreef McVirusS het volgende:

[..]

Je hebt werkelijk geen flauw idee waar je het over hebt he (dHTML = HTML + CSS + Javascript)

ooow... is DAT nou dHTML kijk zo leer je elke dag wat nieuws.

anyway, als je het met een "gewoon" plaatje kan, dan kan je mijn grapje ook, alleen vervang je nu het uitgangsplaatje door een onzichtbare. Jij begrijp?!

dus (ASCII vb)

code:

fig. 1:

 -----------------------------------
| cel met een "onzichtbaar plaatje" |
 -----------------------------------
| cel                    |
 -----------------------------------
| cel                    |
 -----------------------------------

fig 2.

hoeihoeihoeihoei!!! daar komt de muis aan!

|\
| \
|  \
|   \   --  - -
 -  -  ---
  \-\  -------


fig 3.

de muis ROLT OVER de cel, waar voorheen nog niets te zien was
   
 -----------------------------------
| cel met een "onzichtbaar |\aatje" |
 --------------------------| \------
| cel               |  \     |
 --------------------------|   \----
| cel                -  -    |
 -----------------------------\\----


fig 4.

en zie: nu is er opeens een plaatje, uit het niets

 -----------------------------------
| ######################## |\###### |
 --------------------------| \------
| cel               |  \     |
 --------------------------|   \----
| cel                -  -    |
 -----------------------------\\----

[McVirusS]

LOL

Nog kleine toevoeging op dHTML...het is eigenlijk meer het dynamisch aanpassen van elementen op een website met behulp van Javascript en CSS.

[TutanRamon]

ik moet gewoon die code hebben en geen asci grappen

[XangadiX]

zo doet Macromedia het (en met hen 40% van het web schat ik)

code:

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];}
}
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;
}

en dan in je pagina:

<td>
<a href="http://www.scatlovers.com" onMouseOut="MM_swapImgRestore();"  onMouseOver="MM_swapImage('ik_ben_vreselijk_onzichtbaar','','images/mij_kun_je_wel_zien.gif',1);" target="George /'dubbaja/' Bush" >
[img]"images/ik_ben_vreselijk_onzichtbaar.gif"[/img]
</a>
</td>

ben je er wel van bewust dat je dit van werkelijk IEDERE site had kunnen rippen en dat ik VRESELIJK aardig ben dus

* XangadiX heeft wel een bosje bloemen verdiend

[OkkE]

Op vrijdag 22 juni 2001 16:15 schreef TutanRamon het volgende:
ik moet gewoon die code hebben en geen asci grappen

tsja, misschien eens zoeken op www.HotScripts.com of gewoon bij Google.com naar het woord "rollover" of "mouseover"

[Dr.Dokter]

Nodig: plaatje transparant.gif (150x150 en transparant) en plaatje onover.jpg (150x150 met iets leuks). Deze code is gegenereerd door dreamweaver (voor de notepad-conservatievelingen: ja, ik ben een lamer) en bekijk de boel hier maar ff klik

code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
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.0
  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 && document.getElementById) x=document.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>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('onover.jpg')">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" height="150">[img]"transparant.gif"[/img]</td>
    <td width="150" height="150">&nbsp;</td>
    <td width="150" height="150">&nbsp;</td>
  </tr>
  <tr>
    <td width="150" height="150">&nbsp;</td>
    <td width="150" height="150">&nbsp;</td>
    <td width="150" height="150">&nbsp;</td>
  </tr>
  <tr>
    <td width="150" height="150">&nbsp;</td>
    <td width="150" height="150">&nbsp;</td>
    <td width="150" height="150">
    <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
<a href="javascript:;" onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Image1','','onover.jpg',1)">
rol hier met je muis</a></font></div>
    </td>
  </tr>
</table>
</body>
</html>

sorry voor het verneuken van de threadbreedte

[XangadiX]

dr.Doktor krijgt ook een bosje bloemen

[TutanRamon]

Op vrijdag 22 juni 2001 16:26 schreef XangadiX het volgende:

* XangadiX heeft wel een bosje bloemen verdiend

God heeft deze aardige actie gezien en jij zult extra punten krijgen in de hemel.

Op vrijdag 22 juni 2001 16:33 schreef XangadiX het volgende:
dr.Doktor krijgt ook een bosje bloemen

Inderdaad.

[Mathizsias]

code:

<a href="javascript:;" onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Image1','','onover.jpg',1)">
rol hier met je muis</a>

En hoe knop je hier een linje naar een bijv grotere versie van dit plaatje aanvast ?

[pulse80]

ik neem aan dat je naast ' over de link rollen ' er ook op wilt kunnen klikken zodat je als je erover heen rolt dus het plaatje ziet verschijnen in het klein (zoals het nu is) en wanneer je erop klikt er een groter plaatje verschijnt?

<a href= "plaatjegroot.jpg" "javascript:;" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','onover.jpg',1)">
rol hier met je muis</a>

[XangadiX]

mijn god mensen wat schrijven jullie BRILJANTE code voor mouse-over vraagstukken

[Verwijderd]

Anders gaan jullie ff schoppen...

[Verwijderd]

image ready gebruiken, komt samen met photoshop, het is even puzzelen maar werkt perfect...

[Karp]

De almachtige FAQ zegt:
Kan iemand even

Staat ook duidelijk in de algemene FAQ, maar de users in W&G zijn er niet om klusjes voor anderen op te knappen. Dus vragen als 'kan iemand even een logo maken' of 'wil iemand even een popup-scriptje schrijven' e.d. gaan op slot.