Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Plaatje met daaronder een tekst weergeven

Crain - 10/10/2013 12:50

Nieuw lid

Beste leden,

De onderstaande code is bron van www.leejoo.nl.
(bron: Klik hier

Dit is wat mijn maat graag wil hebben, hij wil ook graag dat onder elke plaatje een ondertitel (tekst) wordt weergegeven?

Hoe krijg ik dit voor elkaar?

php code - Bekijk de code zonder highlighting - Klap code in

                <IMG NAME="picture" SRC="images/1.jpg" BORDER=0>
       <FORM NAME="info">
          <SELECT NAME="menu" 
	onchange="document.images['picture'].src=
	this.options[this.selectedIndex].value">
          <OPTION VALUE="images/1.jpg">Picture 1</OPTION>
          <OPTION VALUE="images/2.jpg">Picture 2</OPTION>
          <OPTION VALUE="images/3.jpg">Picture 3</OPTION>
          <OPTION VALUE="images/4.jpg">Picture 4</OPTION>          
          </SELECT>
       </FORM> 
            
<IMG NAME="picture" SRC="images/1.jpg" BORDER=0>
       <FORM NAME="info">
          <SELECT NAME="menu" 
	onchange="document.images['picture'].src=
	this.options[this.selectedIndex].value">
          <OPTION VALUE="images/1.jpg">Picture 1</OPTION>
          <OPTION VALUE="images/2.jpg">Picture 2</OPTION>
          <OPTION VALUE="images/3.jpg">Picture 3</OPTION>
          <OPTION VALUE="images/4.jpg">Picture 4</OPTION>          
          </SELECT>
       </FORM>
 

Bij voorbaat dank,

Crain.

4 antwoorden

Gesponsorde links

Thomas - 10/10/2013 15:28
Moderator		Je zult dit op een of andere manier moeten bijhouden / opslaan. Je zou dit wel in JavaScript kunnen doen -bijvoorbeeld in Arrays, en dan met een snippet JavaScript je HTML-code bijwerken zoals ook in het bovenstaande voorbeeld gebeurt-, maar je zult dan elke keer je broncode moeten aanpassen als er een plaatje bijkomt of een tekst verandert... en dat wordt een beetje een knoeiboel. Waar wil je (maat) dit precies voor gebruiken? Moeten mensen ook zelf afbeeldingen etc. kunnen toevoegen enzo? De manier waarop jij het beschrijft doet mij denken aan een soort van foto-album / gallerij. In dat geval lijkt het mij beter om of ergens een (wellicht gratis) complete oplossing te zoeken of, indien je zelf enige ervaring hebt met een scriptingtaal (bijvoorbeeld PHP) zelf iets te schrijven, of een combinatie van beide (combineer zelf codefragmenten tot het gewenste geheel).

Crain - 10/10/2013 21:22
Nieuw lid		Waar het om gaat is eenmalig "handmatige" invoer, het is voor mijn persoonlijk. Niet voor website, maar voor mijn harde schijf, dus persoonlijk (mijn maat dus). een soort adresboekje wie en wanneer jarig is, etc.... Niemand hoeft wat bewerken en of toevoegen, ik weet dat het met php nodig is. Maar dat hoeft niet, gewoon op mijn harde schijf met behulp van html en css, meer niet. Is het mogelijk om 'simpel' tekst toe te voegen, dus onder foto. Image.jpg = foto (gezicht) Picture 1 = naam van familielid / vrienden Ondertitel = wanneer ie jarig is etc... <--- is dit mogelijk? Dat is eenmalig invoer.

Thomas - 12/10/2013 15:13

Moderator

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[
  function imageSwap(index) {
    var images = new Array();
    images[1] = 'images/1.jpg';
    images[2] = 'images/2.jpg';
    images[3] = 'images/3.jpg';
    images[4] = 'images/4.jpg';
    // et cetera

    var captions = new Array();
    captions[1] = 'onderschrift foto 1';
    captions[2] = 'onderschrift foto 2';
    captions[3] = 'onderschrift foto 3';
    captions[4] = 'onderschrift foto 4';
    // et cetera

    document.images['picture'].src = images[index];
    document.getElementById('caption').innerHTML = captions[index];
  }
//]]>
</script>
</head>

<body>
<img name="picture" src="images/1.jpg" alt="" border="0" />
<span id="caption">onderschrift foto 1</span>
<form name="info" action="">
<select name="menu" onchange="imageSwap(this.value)">
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
</select>
</form>
</body>
</html>

<html>
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[
  function imageSwap(index) {
    var images = new Array();
    images[1] = 'images/1.jpg';
    images[2] = 'images/2.jpg';
    images[3] = 'images/3.jpg';
    images[4] = 'images/4.jpg';
    // et cetera
 
    var captions = new Array();
    captions[1] = 'onderschrift foto 1';
    captions[2] = 'onderschrift foto 2';
    captions[3] = 'onderschrift foto 3';
    captions[4] = 'onderschrift foto 4';
    // et cetera
 
    document.images['picture'].src = images[index];
    document.getElementById('caption').innerHTML = captions[index];
  }
//]]>
</script>
</head>
 
<body>
<img name="picture" src="images/1.jpg" alt="" border="0" />
<span id="caption">onderschrift foto 1</span>
<form name="info" action="">
<select name="menu" onchange="imageSwap(this.value)">
<option value="1">Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
</select>
</form>
</body>
</html>

Lijkt te werken in IE, Chrome en Firefox.

Crain - 12/10/2013 17:45
Nieuw lid		Ja inderdaad, dit is wat ik bedoelde! BEdankt FangorN!!!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten