Grootte afbeelding automatisch aanpassen aan container

Status
Niet open voor verdere reacties.
N

NIh1IlO

Gebruiker
Lid geworden
4 feb 2003
Berichten
750
Hello specialisten,

Ik heb voor een sitepagina in voorbereiding een beeldwisselscriptje (http://users.skynet.be/javascript/images/beeldwissel.htm: beeldwissel) gebruikt om de sponsorlogo's te laten verschijnen.
Het probleem is echter dat de logo's van verschillende afmetingen zijn, zowel in de hoogte als in de breedte. Het resultaat is dan ook dat de logo's er vaak vervormd ofwel onvolledig verschijnen in een voorzien containertje.
Bestaat er een mogelijkheid om de afmetingen van de logo's zichzelf te laten aanpassen aan het containertje? Zo ja, Hoe kan dit worden verwezenlijkt? Kan dit via het scriptje of moet een andere weg worden bewandeld?

Met vriendelijke groeten,

nIh1IlO
 
Ik heb niet echt een idee van hoe je container html enzo eruit ziet, maar hier is mischien iets: als je een <img> geen breedte/hoogte geeft, wordt ie gewoon zoals ie eruit ziet (breedte/hoogte van het plaatje).

Als je een css width of height geeft, kan je bijvoorbeeld 100% ervan maken. Dan wordt ie even breed als de container. De hoogte schaalt dan mee (in vergelijking met de breedte).


:thumb:
 
Ik volg wel een beetje de redenering, maar ik zie niet onmiddellijk hoe ik in css die container moet definiëren.
Is het mogelijk om, aan de hand van dit bestand, een suggestie te formuleren in de htmlcode?

Met vriendelijke dank op voorhand,

nIh1IlO
 
:eek:

oef, waar heb je deze javascript vandaan? En uit welk jaar, 1995? Niet vervelend bedoeld hoor, maar de code is echt... vreselijk. Ik weet nogsteeds niet precies wat je nou wilt, maar probeer dit eens: download .zip met bestandjes. Als je de <img> in een container zet (bv. <div>) en deze een width: 200 geeft... maar in principe is dat niet nodig denk ik? Kijk maar even.
 
Laatst bewerkt:
Beste Vegras,

Ik ken niet veel van Javasripts, maar ik vond het op een andere site.
Ik heb jouw versie gedownload en bekeken en ik zag de afmetingen wijzigen.
Ik heb de code in een nieuwe pagina geplakt en geprobeerd met mijn afbeeldingen, doch de eerste azfbeelding blijft staan etrwijl er geen rotatie.
Ik voeg de code hierna

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img src='./sponsors/hfdsponsors/combilogo_Gust.jpg' alt='banner' id='banner' style='width: 200px; border: 1px dotted #f06;' />
<br />
<script>
var imgs = [
'./sponsors/hfdsponsors/combilogo_Gust.jpg',
'./sponsors/hfdsponsors/morgenzonneke.jpg',
'./sponsors/hfdsponsors/cofely.jpg'
'./sponsors/hfdsponsors/ccalcutta.jpg',
'./sponsors/hfdsponsors/optinuyt.jpg',
'./sponsors/hfdsponsors/eltic.jpg'
];
var index = 0;
var len = imgs.length;
var con = document.getElementById('banner');
function rotate()
{
index = (++index) % len;
con.src = imgs[index];
}
setInterval(rotate, 2500); // om de 2,5 seconde nieuw plaatje
</script>
</body>
</html>
 
Je bent de komma vergeten na het 3e plaatje "'./sponsors/hfdsponsors/cofely.jpg'".
 
Bedankt! Probleem is opgelost! :thumb:

Vriendelijke groeten,

nIh1IlO
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan