getElementById

IE8 · 28 september 2010

Voor een slideshow laad ik de foto's in het geheugen voor in een array met behulp van een for loop door de foto's als naam 'foto1, foto2, foto3, ...' mee te geven.

Deze foto's worden getoond d.m.v. een functie die de teller x in foto[x] ophoogt.

Alles gebeurt in JavaScript, er komt geen HTML aan te pas.

Mijn probleem is hoe deze foto's met getElementById te benaderen, ze hebben geen ID en ik weet ook niet hoe ze met JavaScript een ID te geven.

stegisoft · 28 september 2010

Misschien hebt je hier iets aan.

IE8 · 29 september 2010

Bedankt voor de tip, dit is een uitstekende JavaScript website.

In het voorbeeld op deze site wordt de ID in de HTML-code meegegeven, mijn vraag is of dit in de JavaScript-code kan.

stegisoft · 29 september 2010

Zover ik weet kan je in puur javascript niets uitvoeren zonder actie van iets zoals knop.

Maar in uw geval is de actie de foto klik of zo.

Nu wilt je zodanig dat ook de volgende foto laten zien.

Ik ben geen javascript specialist.

Maar je zou eerder zoiets moeten denken.

Actie = foto

Na zoveel seconde foto2

enz.

De vraag is dan hoe ga je javascript zeggen foto1, foto2

Ik vermoed dat je voor ieder groep een eigen map moet maken zodat je tenminste kan zeggen ga in de root van de map en laat de foto's zien.

Ik denk niet dat je getElementById moet gebruiken.

Zou het niet beter zijn om deze gratis versie te gebruiken?

IE8 · 29 september 2010

Heel erg bedankt dat je mij wil helpen, maar indien je geen JavaScript expert bent kan dit echter niet.

De slideshow werkt uitstekend, dat is geen enkel probleem.

Ik wens in mijn script echter de eigenschappen van foto[x] te kunnen aflezen, zoals de afmetingen van de originele foto, daarom moet ik elke foto[x] afzonderlijk met JavaScript kunnen benaderen. Mijn vraag is op welke manier je dit kunt verwezenlijken, gezien deze foto's geen ID hebben.

leroy · 13 oktober 2010

Wat misschien makkelijk is, is dat je je code hier neer zet. Dan hebben we allemaal een inzicht wat je nou precies hebt, en kunnen we er iets op verzinnen.

Met alleen javascript kun je niets op je scherm laten neerzetten, dan zou je een write functie moeten hebben, dus krijg je automatisch HTML code. Hierin zou je een ID per foto kunnen zetten.

Dus zet even je code hier neer, dan kunnen we je helpen.

groeten,

Leroy Baeyens

IE8 · 13 oktober 2010

<html>
<head>
<title>thumbs scroller</title>
<!-- scroller style -->
<style type="text/css">
#scrollcontainer {
top:0px;
left:12px;
width:170px;
height:100%;
overflow:hidden;
position: absolute;
}
#box {
position:absolute;
left:115%;
}
#move1{position: absolute; height:1000px; cursor: pointer;}
#move2{position: absolute; height:1000px; cursor: pointer;}
</style>
<!-- image style -->
<style type="text/css">
* html body { overflow:hidden; background-color:#000; } 
* html img { border:none; }
#imgcontainer {
position:absolute;
top:100px;
left:250px;
height:400px;
border: solid thin white;
}
</style>
<!-- text style -->
<style type="text/css"> 
#myText {color:white; font-weight:bold;} 
</style>
<!-- change text -->
<script type="text/javascript">
function changeText(content) {document.getElementById('myText').innerHTML = content; } 
</script>
<!-- change image -->
<script type="text/javascript">
var thmb=new Array()
<!-- preload thumbs -->
thmb[0] = new Image();thmb[0].src = "thumb0.jpg"
thmb[1] = new Image();thmb[1].src = "thumb1.jpg"
thmb[2] = new Image();thmb[2].src = "thumb2.jpg"
thmb[3] = new Image();thmb[3].src = "thumb3.jpg"
thmb[4] = new Image();thmb[4].src = "thumb4.jpg"
<!-- preload according images -->
var a_img=new Array()
a_img[0] = new Image();a_img[0].src = "image0.jpg"
a_img[1] = new Image();a_img[1].src = "image1.jpg"
a_img[2] = new Image();a_img[2].src = "image2.jpg"
a_img[3] = new Image();a_img[3].src = "image3.jpg"
a_img[4] = new Image();a_img[4].src = "image4.jpg"
function replace(counter) {
document.getElementById('imgcontainer').src=a_img[counter].src;
topLocation = window.scrollY?window.scrollY:document.body.scrollTop;
document.getElementById('imgcontainer').style.top= (topLocation + 100)}
</script>
<!-- scroll -->
<script type="text/javascript">
T = 1
var showPic=new Array()
showPic[1]='<a href="javascript:void(0)"><img src="thmb1.jpg" title="1" onmouseover="replace(0);changeText(\'Text 1\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px"></a>'
showPic[2]='<a href="javascript:void(0)"><img src="thmb2.jpg" title="2" onmouseover="replace(1);changeText(\'Text 2\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px"></a>'
showPic[3]='<a href="javascript:void(0)"><img src="thmb3.jpg" title="3" onmouseover="replace(2);changeText(\'Text 3\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px">'
showPic[4]='<a href="javascript:void(0)"><img src="thmb4.jpg" title="4" onmouseover="replace(3);changeText(\'Text 4\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px">'
showPic[5]='<a href="javascript:void(0)"><img src="thmb5.jpg" title="5" onmouseover="replace(4);changeText(\'Text 5\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px">'
showPic=showPic.join("");
document.write('<span id="box">'+showPic+'<\/span>')
function getProp() {
ys = document.getElementById('box').offsetHeight
ypos = 0
yypos = ys
timerId=setInterval("scroll()",5) }
function scroll() {
document.getElementById('move1').style.top = ypos
ypos > -ys? ypos = ypos-T:ypos = ys
document.getElementById('move2').style.top = yypos
yypos > -ys? yypos = yypos-T:yypos = ys}
function stop()  {T = 0}
function start() {T = 1}
</script>
</head>
<body onload="getProp()">
<!-- image location -->
<img id="imgcontainer" src="image0.jpg" alt="" title="">
<!-- text location  -->
<div id="myText" align="center"></div>
<!-- scroller location  -->
<div id="scrollcontainer">
<div id="move1" onmouseover="stop()"onmouseout="start()">
<script type="text/javascript">
document.write(showPic)
</script>
</div>
<div id="move2" onmouseover="stop()"onmouseout="start()">
<script type="text/javascript">
document.write(showPic)
</script>
</div>

</div>
</body>
</html>

leroy · 15 oktober 2010

Ik heb je code even bestudeert. En er komt wel HTML code aan te pas. Alleen de Javascript code vervangt de inhoud van de body direct met HTML code, welke die plaatjes zijn. Nadeel hiervan is dat je wanneer je HTML code neer gaat zetten in de body, deze (naar mijn weten) gelijk zal verdwijnen.

Ik zie er ook een aantal fouten in staan waaronder afsluiters in je a-tags. De link wordt geopend, en daarna gesloten. Wat ik eerlijk gezegd ook niet snap, want de A-tag wordt in jouw stukje code eigenlijk helemaal niet gebruikt.

Maar wat is nu je precieze vraag, het antwoord om ze een ID mee te geven ligt in het stukje:

showPic[1]='<a href="javascript:void(0)"><img src="thmb1.jpg" title="1" onmouseover="replace(0);changeText(\'Text 1\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px"></a>'

dat moet namelijk hier:
showPic[1]='<a href="javascript:void(0)" id="1"><img src="thmb1.jpg" title="1" onmouseover="replace(0);changeText(\'Text 1\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px"></a>'

of hier:
showPic[1]='<a href="javascript:void(0)"><img src="thmb1.jpg" title="1" id="1" onmouseover="replace(0);changeText(\'Text 1\');" onmouseout="replace(0);changeText(\'\');" style="height: 115px"></a>'

Maar misschien kan ik je wel verder helpen wat nou precies hetgeen is wat je wilt bereiken. Een slideshow van onderen naar boven waarmee je het plaatje kunt openen als je erop klikt?? Of wat is nou de precieze bedoeling van dit script.

Er is namelijk een veeeeeele betere manier om dit op te lossen. Welke ook gelijk stukken netter is. EN! die code wordt geaccepteerd door de W3-validator

Groeten,

Leroy

IE8 · 19 oktober 2010

- Sorry voor deze uitgestelde reactie: net terug van New York (en momenteel ook nog een beetje last van jetlag). -

Dit script is nog niet af. Totnutoe geeft het thumbnails weer in een scroller, klik je op een thumbnail dan verschijnt die foto in het groot (aangevuld met bijpassende commentaar): dit werkt al zonder problemen. Nu zou ik dit verder willen uitbreiden zodat de afmetingen van de grote foto zich aan de schermresolutie aanpassen: daarvoor heb ik de ID van de momenteel getoonde (grote) foto nodig om de (weergave)afmetingen ervan te kunnen wijzigen.

Heb je echter een betere code, dan verneem ik die graag om er mee verder te kunnen werken.

In ieder geval bedankt voor jouw reactie.

leroy · 19 oktober 2010

Ik snap een beetje wat je bedoeld.

Alleen nu vraag ik me af, als je nou een foto dan gaat hebben die origineel de afmeting heeft 800x600. Je hebt een full HD monitor van 1920x1080. Je wilt deze die aantal hoeveelheid uitrekken, dan wordt de foto toch niet meer mooi?

Of bedoel je ongeveer zoiets als deze website? (link)

Wanneer je op een thumbnail klikt, dat je een grote versie geopend krijgt (gewoon de originele grootte).

Groeten,

Leroy

Inloggen

getElementById

Aanbevolen berichten

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Welkom op PC Helpforum

Leden statistieken

OVER ONS

SITEMAP

Belangrijke informatie