<a target= "_blank" id= "a" ></a> <script type= "Text/javascript" > var imgSrc = new Date (). GetDate () + '. jpg '; document.getElementById (' img '). src = imgsrc; document.getElementById (' a '). href = imgsrc; </script>
Accordion Effects:
CSS Styles
#p1 {float:left; width:50px; height:200px; Background-color: #000; Transition:width 1s; } #p2 {float:left; width:50px; height:200px; Background-color: #F00; Transition:width 1s; } #p3 {float:left; width:50px; height:200px; Background-color: #6F0; Transition:width 1s; } #p4 {float:left; width:50px; height:200px; Background-color: #00F; Transition:width 1s; } #p1: hover{width:400px} #p2: hover{width:400px} #p3: hover{width:400px} #p4: hover{width:400px} #p5 {float:right; width:50px; height:200px; Background-color: #000; Transition:width 1s; } #p6 {float:right; width:50px; height:200px; Background-color: #F00; Transition:width 1s; } #p7 {float:right; width:50px; height:200px; Background-color: #6F0; Transition:width 1s; } #p8 {float:right; width:50px; height:200px; Background-color: #00F; Transition:width 1s; } #p5: hover{width:400px} #p6: hover{width:400px} #p7: hover{width:400px} #p8: hover{width:400px}
Body Program:
<div style= "width:800px; height:200px; " ><div id= "P1" ></div><div id= "P2" ></div><div id= "P3" ></div><div id= "P4" ></div><div style= "width:400px; height:200px; Position:absolute; left:208px; Background-color: #C00; Z-index:-1 "></div><div id=" P5 "></div><div id=" P6 "></div><div id=" P7 "></ Div><div id= "P8" ></div></div>
Photo Daily change with pure CSS3 accordion effect