<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A JavaScript Image Gallery.</title>
<script type="text/javascript">
window.onload = function(){
function galeria(){
var lista = document.getElementById("imagegallery");
var links = lista.getElementsByTagName("a");
for(var x=0;x<links.length;x++){
links[x].onmouseover = function(){
mostrarImg(this);
return false;
}
}
}
function mostrarImg(dato){
var placeholder = document.getElementById("magia");
placeholder.setAttribute("src",dato);
}
galeria();
}
</script>
<style type="text/css">
body{ background: url(../Polaroid2.jpg) center repeat; color:#FFF; text-align:center; font-size:16px; font-family:Arial, Helvetica, sans-serif;}
#centrar{ background: url(../fondo.png); margin-left:auto; margin-right:auto; width:50%; max-width:1000px; height:auto; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
a{ color:#FFF;}
li{ margin-right:10px; list-style: none; display:inline;}
#galeria{ background:#000; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:20px; box-sizing:
border-box; width:45%; margin-left:auto; margin-right:auto;}
img{-moz-border-radius:800px; -webkit-border-radius:800px; border-radius:800px; width:100%;}
#galeria:hover{ background:#F60;}
</style>
</head>
<body>
<div id="centrar">
<h1>Galleria de Imagenes.</h1>
<ul id="imagegallery">
<li><a href="../1.jpg" title="uno" >Imagen 1</a></li>
<li><a href="../2.jpg" title="dos" >Imagen 2</a></li>
<li><a href="../3.jpg" title="tres" >Imagen 3</a></li>
<li><a href="../4.jpg" title="cuatro" >Imagen 4</a></li>
<li><a href="../5.jpg" title="cinco" >Imagen 5</a></li>
<li><a href="../6.jpg" title="seis" >Imagen 6</a></li>
</ul>
<div id="galeria">
<img id="magia" src="../1.jpg" alt="imagenes" />
</div>
<br/>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.