Dag 7 : Javascript

1. Dag 7: Javascript • Html- og css-billedgalleri • Javascript-intro • Javascript billedgalleri 1

2. Html/css galleri Hentbilledernefra: http://websider.keaweb.dk/test/billeder/ <style> .lille{width:100px} .stor {width: 300px; display:none; position:absolute; top:200px; left:20px} #galleri{padding:0px} #galleri li {display:table-cell} #gallerili:hoverimg{display:block} #viewer {width:300px; overflow: auto} </style> ….. <div id="viewer"> <ul id="galleri"> <li><img class="lille" src="billed1.jpg" alt="" /><img class="stor" src="biled1.jpg" alt="" /></li> <li><img class="lille" src="billed2.jpg" alt="" /><img class="stor" src="billed2.jpg" alt="" /></li> <li><img class="lille" src="billed3.jpg" alt="" /><img class="stor" src="billed3.jpg" alt="" /></li> <li><img class="lille" src="billed4.jpg" alt="" /><img class="stor" src="billed4.jpg" alt="" /></li> </ul> </div>

3. Event-attributter medeventhandlers Udgangspunkt: http://websider.keaweb.dk/test/bokse.html Onclick Onmouseover Onmouseout alert This This.style.backgroundColor This.style.width This.style.height This.style.display This.style.left This.style.top Document.getElementById(’xx’).style.backgroundColor This.innerHTML

4. <style type="text/css"> div {height:100px; width:100px} .red{background-color:red; position:relative;} .blue {background-color:blue; position: relative} img {width:100px} </style> Alerts <div class="red" onclick="alert('du klikkedepårød!')"></div> <div class="blue" onclick="alert('du klikkedepåblå!')"></div> Farveskift <div class="red" onclick="this.style.backgroundColor='yellow'"></div> <div class="blue" onclick="this.style.backgroundColor='green'"></div> Størrelse <div class="red" onclick="this.style.width=200"></div> <div class="blue" onclick="this.style.height=300"></div> Farveskrift, mouseover <div class="red" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='red'"></div> <div class="blue" onmouseover="this.style.backgroundColor='green'" onmouseout=this.style.backgroundColor='blue'></div> Position <div class="red" onclick="this.style.left=150"></div> <div class="blue" onclick="this.style.top=-35"></div> Synlighed <div class="red" onclick="this.style.display='none'"></div> <div class="blue" onclick="this.style.display='none'"></div> Farveskiftpåhinanden <div id="red" class="red" id="red" onclick="document.getElementById('blue').style.backgroundColor='red'"></div> <div id="blue" class="blue" id="blue" onclick="document.getElementById('red').style.backgroundColor='blue'"></div> Flytindhold <div id="red2" class="red" id="red" onclick="document.getElementById('blue2').innerHTML=this.innerHTML"><br /><imgsrc="billed1.jpg" /></div> <div id="blue2" class="blue" id="blue" onclick="this.innerHTML=''"></div>

5. Html/css gallerimed click og javascript <style> .lille{width:100px; cursor:pointer} #galleri{padding:0px} #galleri li {display:table-cell} #gallerili:hoverimg{display:block} #viewer {width:300px; overflow: auto} #screen img{width: 300px} </style> <div id="viewer"> <ul id="galleri"> <li onclick="document.getElementById('screen').innerHTML=this.innerHTML"> <img class="lille" src="billed1.jpg" alt="" /> </li> <li onclick="document.getElementById('screen').innerHTML=this.innerHTML"> <img class="lille" src="billed2.jpg" alt="" /> </li> <li onclick="document.getElementById('screen').innerHTML=this.innerHTML"> <img class="lille" src="billed3.jpg" alt="" /> </li> <li onclick="document.getElementById('screen').innerHTML=this.innerHTML"> <img class="lille" src="billed4.jpg" alt="" /> </li> </ul> </div> <div id="screen"></div>