onmouseover

Status
Niet open voor verdere reacties.
H

Henk48

Gebruiker
Lid geworden
31 okt 2001
Berichten
234
Met een onmouseover wil ik wanneer je over een thumbnail gaat een grotere afbeelding laten verschijnen in een tabelcel ernaast. Dat is me gelukt.
Nu wil ik tegelijkertijd in een andere cel een tekstje laten verschijnen gekoppeld aan de afbeelding en dat lukt me niet.
Weet iemand een oplossing?
 
Het zou kunnen helpen als je je code plaatst die je tot nu toe hebt :thumb:
 
Met Dreamweaver kan ik wel een tweede afbeelding met daarop een tekstje laten verschijnen, (zie code hieronder) maar het liefst zou ik de tekst niet middels een afbeelding plaatsen maar rechtstreeks.

HTML: 
<td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w1k.jpg" name="w1k" width="80" height="80" border="0" id="w1k"></a></td>
<td><a href="javascript:;" onMouseOver="MM_swapImage('tekst1','','afb/tekst2.gif','w1','','afb/w2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w2k.jpg" name="w2k" width="80" height="80" border="0" id="w2k"></a></td>
 
Laatst bewerkt door een moderator:
De functie "MM_swapImage" is ook wel handig om in te kunnen kijken.

Geef je complete code (van je pagina/website) of een URL a.u.b, dan kan het makkelijker met je huidige script geïntegreerd worden.
 
Een kleine nieuwe functie is handiger dan mm_nogwat aanpassen. ;)
PHP: 
<script type="text/javascript">
 function info(img,txt) {
  document.getElementById('plaatje').src = img;
  document.getElementById('tekst').innerHTML = txt;
  };
</script>

<a href="#" onmouseover="info('foto1.jpg','Foto 1')" onclick="return false">Foto 1</a>
<a href="#" onmouseover="info('foto2.jpg','Foto 2')" onclick="return false">Foto 2</a>

<img id="plaatje" src="#">
<div id="tekst">...</div>
Vr.Gr. Egel.
 
Dit is wat ik nu heb: 12 thumbnails die een grotere afbeelding geven wanneer je er met de muis op komt. Tegelijkertijd wil ik een tekstje, maar dan niet als afbeelding.
Ik zal me ook nog buigen over de oplossing van Egel.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Interieurvormgeving</title>

<script language="JavaScript" type="text/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>
<link href="apstyle.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#CCCCCC" onLoad="MM_preloadImages('afb/w5.jpg','afb/w1.jpg','afb/w2.jpg','afb/w3.jpg','afb/w4.jpg','afb/w6.jpg','afb/w7.jpg','afb/w8.jpg','afb/w9.jpg','afb/w10.jpg','afb/w11.jpg','afb/w12.jpg','afb/tekst2.gif')">
<table width="806" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="806" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td>&nbsp;</td>
    <td rowspan="2" valign="bottom"><img src="afb/logo2.jpg" width="356" height="60"></td>
    <td width="450" align="left" valign="bottom" bgcolor="#ffffff"> 
      <div align="right"><span class="lozelink">PROJECTEN</span> <span class="bodytekstklein">|</span> 
        <a href="infoprofportret.htm" target="_parent">INFORMATIE</a> <span class="bodytekstklein">|</span> 
        <a href="contact.htm" target="_parent">CONTACT</a> <span class="bodytekstklein">|</span> 
        <a href="index.htm">HOME</a><img src="afb/spacer.gif" width="10" height="26"></div></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td width="450" align="left" valign="top">
      <div align="right"><br>
        <span class="lozelink"><a href="przorg1.htm" target="_parent">_zorg</a></span> 
        <span class="bodytekstklein">|</span> <span class="lozelink">_werk</span> 
        <span class="bodytekstklein">|</span> <a href="prpub1.htm" target="_parent">_publieke 
        ruimte</a> <span class="bodytekstklein">|</span> <a href="prvloeren.htm" target="_parent">_vloeren</a><img src="afb/spacer.gif" width="10" height="10"></div></td>
  </tr>
</table>
<table align="center" cellspacing="1" bgcolor="#FFFFFF">
  <tr>
    <td height="450" align="right"> 
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#d5d5d5">
<tr valign="bottom"> 
          <td width="350" align="left"> <table height="261" border="0" cellpadding="15" cellspacing="0">
              <tr> 
                <td valign="bottom"><p><span class="bodytekstvet">PROJECTEN _werk</span><br>
                    <span class="bodytekst">Locaties van al dit moois</span></p>
                  <p><img src="afb/tekst1.gif" name="tekst1" width="320" height="100" id="tekst1"></p></td>
              </tr>
              <tr> 
                <td valign="bottom"> <table border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w1k.jpg" name="w1k" width="80" height="80" border="0" id="w1k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('tekst1','','afb/tekst2.gif','w1','','afb/w2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w2k.jpg" name="w2k" width="80" height="80" border="0" id="w2k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w3.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w3k.jpg" name="w3k" width="80" height="80" border="0" id="w3k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w4.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w4k.jpg" name="w4k" width="80" height="80" border="0" id="w4k"></a></td>
                    </tr>
                    <tr> 
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w5.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w5k.jpg" name="w5k" width="80" height="80" border="0" id="w5k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w6.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w6k.jpg" name="w6k" width="80" height="80" border="0" id="w6k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w7.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w7k.jpg" name="w7k" width="80" height="80" border="0" id="w7k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w8.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w8k.jpg" name="w8k" width="80" height="80" border="0" id="w8k"></a></td>
                    </tr>
                   <tr> 
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w9.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w9k.jpg" name="w9k" width="80" height="80" border="0" id="w9k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w10.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w10k.jpg" name="w10k" width="80" height="80" border="0" id="w10k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/w11.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w11k.jpg" name="w11k" width="80" height="80" border="0" id="w11k"></a></td>
                      <td><a href="javascript:;" onMouseOver="MM_swapImage('w1','','afb/z12.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="afb/w12k.jpg" name="w12k" width="80" height="80" border="0" id="w12k"></a></td>
                    </tr>
				  </table></td>
              </tr>
            </table></td>
          <td><img src="afb/w1.jpg" name="w1" width="450" height="450" id="w1"></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="806" height="29" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="338" align="left" valign="top"> 
<div align="right"><a href="przorg2.htm">meer &gt;</a></div></td>
    <td width="468" align="right" valign="bottom">&nbsp;</td>
  </tr>
</table>
</body>
 
Beste Egel,
Bedankt voor je hulp. Ik denk dat ik het een beetje snap. Ik krijg het zelfs werkend.
Het script werkt niet helemaal conform wat ik eerst had. Je moet nu eerst een afbeelding activeren met de muis alvorens deze verschijnt en de uitgangssituatie keert niet automatisch terug.
Verder neem ik aan dat met meerdere afbeeldingen ik de regels gewoon kan herhalen?

vr. gr.
 
Henk48 zei:
Beste Egel,
Bedankt voor je hulp. Ik denk dat ik het een beetje snap. Ik krijg het zelfs werkend.
Het script werkt niet helemaal conform wat ik eerst had. Je moet nu eerst een afbeelding activeren met de muis alvorens deze verschijnt en de uitgangssituatie keert niet automatisch terug.
Verder neem ik aan dat met meerdere afbeeldingen ik de regels gewoon kan herhalen?

vr. gr.
Klik om te vergroten...

Ja je kan gewoon die regels herhalen (als ik even voor Egel mag antwoorden) :D

Als hiermee je vraag opgelost is, zet je de status dan ook even op opgelost? :thumb:
 
aaajeetee zei:
Ja je kan gewoon die regels herhalen (als ik even voor Egel mag antwoorden) :D
Klik om te vergroten...
Dat mag hoor. :D

Gewoon herhalen inderdaad. :) Ik heb het script nog wat uitgebreid.
PHP: 
<script type="text/javascript">

 var sImg = 'foto0.jpg', sTxt = '';
 function outfo() {
  document.getElementById('plaatje').src = sImg;
  document.getElementById('tekst').innerHTML = sTxt;
  };

 var mImg = '', mTxt = '';
 function info(img,txt) {
  document.getElementById('plaatje').src = img;
  document.getElementById('tekst').innerHTML = txt;
  mImg = img; mTxt = txt;
  };

 function stayfo() {
  sImg = mImg;
  sTxt = mTxt;
  return false;
  };

 function preload() {
  for (var i = 1; i <= 12; i++) {
   var img = new Image();
   img.src= 'afb/w' + i + '.jpg';
   };
  };
 window.onload = preload;

</script>

<a href="#" onclick="return false" onmouseover="info('foto1.jpg','Foto 1')" onmouseout="outfo()">Foto 1</a>
<a href="#" onclick="return stayfo()" onmouseover="info('foto2.jpg','Foto 2')" onmouseout="outfo()">Foto 2</a>

<img id="plaatje" src="#">
<div id="tekst">...</div>
Het script zet het plaatje en tekst weer terug op sImg en sTxt.

Als je wilt kun je ook een functie gebruiken die het plaatje en de tekst vasthoud als je op een thumb klikt (de tweede link). :)

En afb/w1.jpg t/m afb/w12.jpg worden alvast ingeladen.


Vr.Gr. Egel.
 
Ik heb toch nog een probleempje met het starten van de pagina. Ik krijg dan alleen de thumbnails te zien en niet het eerste plaatje groot. Pas wanneer ik over de thumbnail ga verwschijnt de eerste afbeelding.
 
Ik had nog een # staan waar de eerste afbeelding hoorde: :)
<img id="plaatje" src="afb/w1.jpg">

In het script zet je dan sImg = 'afb/w1.jpg', sTxt = '';


Vr.Gr. Egel.
 
Aha, dat lukt helemaal.
Toch doe ik nog iets fout bij het plaatsen van de thumbnails. Er komt een blauwe rand omheen.

HTML: 
<a href="#" onclick="return false" onmouseover="info('afb/w1.jpg','Foto 1')" onmouseout="outfo()"><img src="afb/w1k.jpg" width="80" height="80"></a>
<a href="#" onclick="return false" onmouseover="info('afb/w2.jpg','Foto 2')" onmouseout="outfo()"><img src="afb/w2k.jpg" width="80" height="80"></a>
<a href="#" onclick="return false" onmouseover="info('afb/w3.jpg','Foto 3')" onmouseout="outfo()"><img src="afb/w3k.jpg" width="80" height="80"></a>

Tenslotte zou ik het ook leuk vinden wanneer de tekst bij plaatje 1 blijft staan. Nu verdwijnt de standaardtekst weer wanneer de muis niet op een thumbnail staat.
vr. gr.
 
In het script: sImg = 'afb/w1.jpg', sTxt = 'Eerste tekst'; en in de div: <div id="tekst">Eerste tekst</div> zorgt ervoor dat de eerste tekst blijft staan. :)

En border="0" in de img-tags van de thumbnails haalt het randje weg: <img border="0" ... >


Vr.Gr. Egel.
 
Geweldig bedankt!!! Helemaal zoals ik het hebben wil. :thumb:
Vr. gr.
Henk
 
Toch nog even een vraagje over de opmaak van de tekst die gaat verschijnen. Hoe koppel ik een css style aan de tekst?
 
Intussen de oplossing gevonden: aan de variabele toegevoegd. Als redelijk beginner ging dat natuurlijk eerst mis, maar de aanhouder wint en nu werkt het perfect.
Nogmaals dank voor de uitstekende hulp.
 
Graag gedaan! :)

Opmaak per tekst verschillend kan idd met de parameter / variabele van de functie, zoals: info('foto1.jpg','Foto <b>1</b>')"

Als je een ' in de tekst zelf wilt moet je er wel een \ voorzetten: info('fotos.jpg','Foto\'s')"

De opmaak van alle tekst in <div id="tekst">...</div> met een stylesheet gaat zo: #tekst {color: #fff; font-weight: bold;}


Maar 't werkt al. ;) Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan