cambiar imagen e hipervinculo

felipe12357 · #1 (**permalink**) 14/03/2012, 18:29

Hola a todos, les cuento mi problema:

Actualmente estoy haciendo una aplicacion en la cual el usuario da click en un boton y la imagen cambia, esta parte ya la tengo bien, ahora mi problema es q cuando cambie la imagen quiero q cambie el hipervinculo que esta asosociado a esta, es decir
cuando carga la pagina inicialmente tiene una imagen ejemplo una mariposa y el usuario al darle click a la mariposa, la pagina lo lleva google.

Ahora si el usuario le da click al boton de pasar imagen, la mariposa cambia por un balon (por ejemplo) y al darle click al balon quiero que en vez de llevar al usuario a google lo lleve a otro sitio (hotmail ) por ejemplo.

espero haberme hecho entender y me puedan ayudar.

El codigo que estoy utilizando para pasar las imagenes es:

Código HTML:

<table border="0" cellpadding="0"> 
  <tr> 
    <td width="100%"><img src="x1.jpg" width="240" height="160" name="photoslider"></td> 
  </tr> 
  <tr> 
    <td width="100%"><form method="POST" name="rotater"> 
<script type="text/javascript"> 
var photos=new Array() 
var which=0 

  ////cambia las variables necesarias 
photos[0]="x1.jpg" 
photos[1]="x2.jpg" 
photos[2]="x3.jpg" 
photos[3]="x4.jpg" 
photos[4]="x5.jpg" 


function backward(){ 
if (which>0){ 
window.status='' 
which-- 
document.images.photoslider.src=photos[which] 
} 
} 

function forward(){ 
if (which<photos.length-1){ 
which++ 
document.images.photoslider.src=photos[which] 
} 
else window.status='End of gallery' 
} 
</script><!--webbot 
      bot="HTMLMarkup" endspan --><input type="button" value="<<Back" name="B2" 
      onClick="backward()"> <input type="button" value="Next>>" name="B1" 
      onClick="forward()"><br> 
      </center></div> 
    </form> 
    </td> 
  </tr> 
</table>

Gracias!

quimfv · #2 (**permalink**) 15/03/2012, 06:13

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function cambiaLink(){
document.getElementById("elLink").href="456.html";
}
</script>
</head>
 
<body>
<table border="0" cellpadding="0"> 
  <tr> 
    <td width="100%"><a href="123.html" id="elLink"><img src="x1.jpg" width="240" height="160" name="photoslider"></a></td> 
  </tr> 
  <tr> 
    <td width="100%"><a href="#" onClick="cambiaLink()">Boton</a> 
    </td> 
  </tr> 
</table> 
</body>
</html>

Para asociar el nuevo link a la nueva imagen crea un array de links similar al de imagenes donde el indice de la imagen y de su correspondiente link sean el mismo y luego usa las funciones que te cambian las imagenes y les agregas las lineas que te cambiará el link....