Dag 7: Javascript Html- og css-billedgalleri Javascript-intro

Præsentationer af emnet: "Dag 7: Javascript Html- og css-billedgalleri Javascript-intro"— Præsentationens transcript:

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

2 Html/css galleri Hent billederne fra: <style> .lille{width:100px} .stor {width: 300px; display:none; position:absolute; top:200px; left:20px} #galleri{padding:0px} #galleri li {display:table-cell} #galleri li:hover img{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 med eventhandlers
Udgangspunkt: 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}
<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 klikkede på rød!')"></div> <div class="blue" onclick="alert('du klikkede på 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> Farveskift på 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> Flyt indhold <div id="red2" class="red" id="red" onclick="document.getElementById('blue2').innerHTML=this.innerHTML"><br /><img src="billed1.jpg" /></div> <div id="blue2" class="blue" id="blue" onclick="this.innerHTML=''"></div>

5 Html/css galleri med click og javascript
<style> .lille{width:100px; cursor:pointer} #galleri{padding:0px} #galleri li {display:table-cell} #galleri li:hover img{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> <img class="lille" src="billed2.jpg" alt="" /> <img class="lille" src="billed3.jpg" alt="" /> <img class="lille" src="billed4.jpg" alt="" /> </ul> </div> <div id="screen"></div>