login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Huidige ID uitlezen met innerHTML

Offline SilVeX - 03/04/2008 21:11
Avatar van SilVeXHTML beginner Goedenavond,

Nu al mijn excuses ik kon geen goede titel verzinnen. Maar mijn probleem is het volgende:

Ik wil heb een kleine javascript functie die de code in mijn cell genaamd "bigPic" veranderd. Maar nu wil ik voordat ik dat uitvoer eerst uitlezen wat er op dat moment in de cell met het id "bigPic" staat uitlezen en deze informatie in een variabele stoppen.
Is dit mogelijk? En zo ja, hoe?
Dit is mijn js functie:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function changePic(inhoud) { 
  2. 	document.getElementById('bigPic').innerHTML = inhoud; 
  3. }

8 antwoorden

Gesponsorde links
Offline Grayen - 03/04/2008 21:41
Avatar van Grayen PHP ver gevorderde
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var oud;
  2.  
  3. function changePic(inhoud) { 
  4.     oud = document.getElementById('bigPic').innerHTML;
  5.     document.getElementById('bigPic').innerHTML = inhoud; 
  6. }
Offline SilVeX - 03/04/2008 21:53
Avatar van SilVeX HTML beginner Dat dacht ik dus ook. Maar ik krijg dan meteen een foutmelding bij het openen van de pagina. Ik was aan het oefenen met javascript en ik wil dus dat bij mouse-over op 1 van de kleine plaatjes het kleine plaatje in de grote opent. En bij onMouseOut weer verwdijnt. En bij onClick dat het plaatje blijft staan in de variabele oud. Zodat het ook blijft staan als je onMouseOut doet
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <script type="text/javascript">
  4. 	var oud;
  5. 	oud = document.getElementById('bigPic').innerHTML;
  6. function rollOut() {
  7. 	document.getElementById('bigPic').innerHTML = oud;
  8. }
  9. function changePic(inhoud) {
  10. 	document.getElementById('bigPic').innerHTML = inhoud; 
  11. } 
  13. </head>
  15. <table height="350" border="0" cellspacing="5" cellpadding="0">
  16.         <tr>
  17.           <td width="102"><img src="hond.gif" width="100" height="100" border="0" onMouseOver="changePic('<img src=hond1.gif width=300 height=300 />')" onmouseout="rollOut()" /></td>
  18.           <td width="302" rowspan="3" id="bigPic"><img src="hond.gif" width="300" height="300" border="0" /></td>
  19.         </tr>
  20.         <tr>
  21.           <td><img src="hond1.gif" width="100" height="100" border="0" /></td>
  22.         </tr>
  23.         <tr>
  24.           <td><img src="hond2.gif" width="100" height="100" border="0" /></td>
  25.           </tr>
  26.       </table>
  27. </body>
  28. </html>
Offline yetti4 - 03/04/2008 22:38 (laatste wijziging 03/04/2008 22:39)
Avatar van yetti4 JS interesse als ik je goed begrijp moet je helemaal niet met innerHTML werken, probeer dit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <td><img src="hond.gif" width="100" height="100" border="0" onmouseover="document.getElementById('bigPic').src='anderhond.gif'" onmouseout="document.getElementById('bigPic').src='hond.gif'" />)</td>

bigpic moet id zijn van plaatje die je wil vergroten
Offline SilVeX - 03/04/2008 22:47 (laatste wijziging 08/04/2008 08:55)
Avatar van SilVeX HTML beginner Het is me allemaal gelukt, op een iets andere manier maar het werkt...

m a a r:
Ik heb nu 1 plaatje die ik 3x weergeef in verschillende formaten:
1 x thumb
1 x grote thumb
1 x ware grote

Nu wil ik 3 verschillende plaatjes gebruiken dus dat ik ze in photoshop van te voren resize zodat de kwaliteit behouden blijft.

Iemand enig idee hoe ik dat kan gaan oplossen?
Dit is me js:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var active="vijver.jpg";
  2. function roll(source,actie) {
  3. 	if (actie=="1") {
  4. 		if (active!=source){[/url][url]
  5. 			document.getElementById("big").src=source;
  6. 			document.getElementById("fotoLink").href=source;
  7. 			active=source;
  8. 		}
  9. 	}
  10. 	else if (actie=="2") {
  11. 		if (active!=source){
  12.  
  13. 			document.getElementById("big").src=source;
  14. 		}
  15. 	}
  16. 	else {
  17. 		document.getElementById("big").src=active;
  18. 	}
  19. }


En dit is me html:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <table height="350" border="0" cellspacing="5" cellpadding="0">
  2. 		  <tr>
  3. 			 <td width="102"><img id="1" style="border:1px solid #000;" src="vijver.jpg" alt="Klik op de afbeelding" width="100" height="100" border="0" onMouseOut="roll()" onMouseOver="roll(this.src,2);this.style.cursor='pointer'" onClick="roll(this.src,1)" /></td>
  4.  
  5. 			 <td width="302" rowspan="3" style="padding-top:4px;" align="center" valign="top"><a href="vijver.jpg" title="Hier kan je een kleine omschrijving van het plaatje zetten" rel="lightbox" id="fotoLink"><img src="vijver.jpg" width="300" height="300" border="0" id="big" /> Klik hier voor een grotere versie</a></td>
  6. 		  </tr>
  7. 		  <tr>
  8. 			 <td><img id="2" src="ohh2.jpg" style="border:1px solid #000;" width="100" alt="Klik op de afbeelding" height="100" border="0" onMouseOut="roll()" onMouseOver="roll(this.src,2);this.style.cursor='pointer'" onClick="roll(this.src,1)" /></td>
  9. 		  </tr>
  10. 		  <tr>
  11. 			 <td><img id="3" src="terrazzo.jpg" style="border:1px solid #000;" width="100" height="100" border="0" alt="Klik op de afbeelding" onMouseOut="roll()" onMouseOver="roll(this.src,2);this.style.cursor='pointer'" onClick="roll(this.src,1)" /></td>
  12. 			 </tr>
  13. 		</table>


Preview:Klik hier
Offline Ibrahim - 08/04/2008 09:12
Avatar van Ibrahim PHP expert Als je zelf de image resized, haal dan de width/height attribuut uit de img tag ?
Offline SilVeX - 08/04/2008 10:36
Avatar van SilVeX HTML beginner Maar ik moet dan toch ook aangeven dat hij een ander plaatje moet openen in de grotere versie?

Ik moet 3 verschillende sources opgeven.

Wat ik nu doe is 3x dezelfde source opgeven.
Offline Ibrahim - 08/04/2008 17:51
Avatar van Ibrahim PHP expert Je geeft aan alle drie de plaatjes dezelfde naam. Je maakt je images map zo:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. /images
  2.   /slideshow
  3.     /album
  4.        /xsmall
  5.        /small
  6.        /large


Je slaat je kleine thumb, grotere thumb en grote plaatje respectievelijk op in xsmall, small en large.

De rest kun jij wel verzinnen
Offline SilVeX - 08/04/2008 21:36
Avatar van SilVeX HTML beginner Ik snap waar je heen wil maar als ik kijk naar mijn eerst small icon:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img id="1" style="border:1px solid #000;" src="images/fotos/small/foto1.jpg" alt="Klik op de afbeelding" width="100" height="100" border="0" onMouseOut="roll()" onMouseOver="roll(this.src,2);this.style.cursor='pointer'" onClick="roll(this.src,1)" />

Hoe kan ik dan het woordje "small" vervangen door bv. "thumb"?
Is daar een functie voor?
iig bedankt alvast voor het meedenken
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.247s