Imagenes interactivas con CSS

Posteado el 07. Nov, 2010 por tuto in Desarrollo Web, HTML y CSS, Jquery

Esto es lo que aprenderemos a realizar en CSS en este tutorial

PASO 1
Creamos una carpeta nueva llamada drag, dentro de esta creamos una carpeta llamada imágenes dentro del la cual vamos a colocar las imágenes que vamos a utilizar en este tutorial.

Imagenes interactivas con CSS

PASO 2
Vamos a Adobe Dreamweaver y creamos un nuevo documento HTML.

Imagenes interactivas con CSS

PASO 3
Debajo de la etiqueta Draw con JQuery vamos a copiar el siguiente código html4strict.

Imagenes interactivas con CSS

PASO 4
Con el commando Ctrl + S guardamos nuestro documento con el nombre drag.html

Imagenes interactivas con CSS

PASO 5
Vamos al menú File – New y creamos un nuevo documento CSS.

Imagenes interactivas con CSS

PASO 6
Dentro del documento copiamos el siguiente código CSS

Code block

body {
	font-family:Arial;
	font-size:12pt;
	padding:20px;
	width:800px;
	margin:20px auto;
	background-color: #333333;
}
h1 { font-size:16pt; }
h2 { font-size:13pt; }
ul { margin:0px; padding:0px; margin-left:20px; }
#list1, #list2 {
	width:500px;
	list-style-type:none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }
#list1 div, #list2 div {
	width:100px;
	height:100px;
	border:solid 1px black;
	text-align:center;
}
#list2 { float:right; }
.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
 
.style1 {
	color: #999999;
	font-weight: bold;
	font-size: 10;
}

Imagenes interactivas con CSS

PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css

Imagenes interactivas con CSS

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas vamos a copiar el siguiente código html4strict

Code block

<div align="center">
  <p class="style1">Arrastre la imagen a la posición deseada </p>
</div>
<ul id="list1">
		<li>
		  <div><img src="imagenes/1.jpg" width="100" height="100" /></div>
  </li>
		<li>
		  <div><img src="imagenes/2.jpg" width="100" height="100" /></div>
		</li>
	  <li><div><img src="imagenes/3.jpg" width="100" height="100" /></div>
	  </li>
		<li>
		  <div><img src="imagenes/4.jpg" width="100" height="100" /></div>
		</li>
		<li>
		  <div><img src="imagenes/5.jpg" width="100" height="100" /></div>
		</li>
		<li>
		  <div><img src="imagenes/6.jpg" width="100" height="100" /></div>
		</li>
		<li>
		  <div><img src="imagenes/1.jpg" alt="" width="100" height="100" /></div>
		</li>
		<li>
		  <div><img src="imagenes/2.jpg" alt="" width="100" height="100" /></div>
		</li>
		<li><div><img src="imagenes/3.jpg" alt="" width="100" height="100" /></div>
		</li>
        <li>
          <div><img src="imagenes/4.jpg" alt="" width="100" height="100" /></div>
        </li>
        <li>
          <div><img src="imagenes/5.jpg" alt="" width="100" height="100" /></div>
        </li>
        <li>
          <div><img src="imagenes/7.jpg" alt="" width="100" height="100" /></div>
        </li>
	</ul>
 
    	<script type="text/javascript">
		$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
 
		function saveOrder() {
			var serialStr = "";
			$("#list1 li").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
			$("input[name=list1SortOrder]").val(serialStr);
		};
	</script>