Ayuda para hacer un enlace por javascript

jcouoh · #1 (**permalink**) 22/03/2010, 12:56

Hola amigos tengo el siguiente script, el cual hace lo siguiente:

1. tiene un galería de imagenes que se mueve de derecha a izquierda.
2. Cuando se hace clic en una imagen se muestra la imagen en la parte superior en tamaño grande, lo cual es lo que necesito.
Ahora lo que me hace falta es hacerle clic a esa imagen grande y abrir una nueva pagina.

Este es el codigo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Compuseñal</TITLE>

<script type="text/javascript" language="javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.hr;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>



<link rel="stylesheet" type="text/css" href="librerias/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="librerias/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="librerias/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="librerias/ddlevelsmenu.js">

/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>




</head>
<body>
<div id="maincontainer">


<div id="contentwrapper">
<div id="contentcolumn">
<div class="borde">
<div class="inn"><DIV 
style="BORDER-RIGHT: #999 0px solid; PADDING-RIGHT: 1em; BORDER-TOP: #999 0px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; 

MARGIN: 0px 0px 0px; BORDER-LEFT: #999 0px solid; PADDING-TOP: 1em; ">
<P id=desc> &nbsp;</P>
<center><IMG class=clear id=placeholder 
alt="" src="imagenes/logo3dzoofinal.jpg"></center> </DIV></div>
</div>
</div>
</div>


</div>

<div id="footer"><script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="750px"
//Specify the slider's height
var sliderheight="80px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''

leftrightslide[0]='<a title="CABALLO DE MAR ACRILICO"hr="imagenes/caballodemaracrilicosinfondo.jpg" onclick="return 

showPic(this)" href="indice.php"><img src="imagenes/caballodemaracrilicosinfondo_th.jpg" border=1></a>'

leftrightslide[1]='<a title="CABALLO DE MAR MDF"hr="imagenes/caballodemarmdfbrillo.jpg" onclick="return showPic(this)" ><img 

src="imagenes/caballodemarmdfbrillo_th.jpg" border=1></a>'

leftrightslide[2]='<a title="BALLENART"hr="imagenes/ballenart.jpg" onclick="return showPic(this)" href="imagenes.php"><img 

src="imagenes/ballenart_th.jpg" border=1></a>'

leftrightslide[3]='<a title="CHIHUAHUA ACRILICO"hr="imagenes/chihuahuaacrilicosinfondo.jpg" onclick="return showPic(this)" 

><img src="imagenes/chihuahuaacrilicosinfondo_th.jpg" border=1></a>'


//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" 

style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" 

onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></div>

</div>
</body>
</html>

De antemano muchas gracias

jcouoh · #2 (**permalink**) 22/03/2010, 14:47

Hola, he conseguido poner el enlace, solo modifique unas lineas de esta manera:

Código HTML:

<div class="inn"><DIV 
style="BORDER-RIGHT: #999 0px solid; PADDING-RIGHT: 1em; BORDER-TOP: #999 0px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; MARGIN: 0px 0px 0px; BORDER-LEFT: #999 0px solid; PADDING-TOP: 1em; ">
<P id=desc> &nbsp;</P>
<center><a href="store/mete_producto.php"><IMG class=clear id=placeholder 
alt="" src="imagenes/logo3dzoofinal.jpg" ></a></center> </DIV></div>

Ahora bien, yo quisiera que si me pueden ayudar, podificando el codigopara que si al hacer clic en una imagen determinada este pueda llevar a codigo php valores de la imagen como un id,

Espero poder darme a entender.

Gracias nuevamente

jcouoh · #3 (**permalink**) 22/03/2010, 18:04

He encontrado que la solucion estaria quiza en esta parte del codigo:

Código HTML:

function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.hr;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}

Quizá lo que le falta es de alguna manera hacer que el elemenot title pueda hacersele clic y en el llevar los datos de la imagen como es el nombre.

Agradecería cualquier ayuda

Saludos

jcouoh · #4 (**permalink**) 25/03/2010, 10:15

Al moderador del foro, le pido por favor elimine este post, ya que quizá por no explicarme adecuadamente no obtuve ninguna respuesta,

de antemano muchas gracias

tazzwt · #5 (**permalink**) 25/03/2010, 10:52

sube el código de fuente porfavor, nos sera muy útil para estudiarlo.

jcouoh · #6 (**permalink**) 25/03/2010, 11:40

Gracias, es es el codigo fuente que tengo el cual me hace lo que necesito casi en todo, pero le quiero añadir una peculiaridad que al hacer clic en la imagen grande se abra una pagina con datos de la imagen como es el titulo y el nombre.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>javascript y html en uno</TITLE>

<script type="text/javascript" language="javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.hr;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>
<style type="text/css">

* {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; 

BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; outline: none
}

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #ffffff;
height: 170px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 182px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #424242;
height: 454px;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}
#navizq {
FLOAT: left;
WIDTH: 180px;
height:30px;
background: #424242;  

}
#navder {
FLOAT: left; 
background: #424242;
width:660px;  
}
#usuarios{
background: #EF8C00;

text-align:left;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.inn{
margin: 2px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

.borde {

border: 1px solid #aaaaaa;
}
.menu
{
color: #ffffff;
text-align: center;
FONT-WEIGHT: bold;
border-bottom: 1px solid #ffffff;
}
A:link {
	FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #c30; TEXT-DECORATION: none
}
A:visited {
	FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #c30; TEXT-DECORATION: none
}
A:hover {
	FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #999; TEXT-DECORATION: underline
}
A:active {
	FONT-WEIGHT: bold; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #526968; TEXT-DECORATION: none
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><img src="imagenes/logo_min.jpg"></div>










</div>

</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="borde">
<div class="inn"><DIV 
style="BORDER-RIGHT: #999 0px solid; PADDING-RIGHT: 1em; BORDER-TOP: #999 0px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; 

MARGIN: 0px 0px 0px; BORDER-LEFT: #999 0px solid; PADDING-TOP: 1em; ">
<P id=desc> &nbsp;</P>
<center><a href="mete_producto.php"><IMG class=clear id=placeholder 
alt="" src="imagenes/logo3dzoofinal.jpg"></a></center> </DIV></div>
</div>
</div>
</div>
<div id="leftcolumn">



</div>

<div id="footer"><script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="750px"
//Specify the slider's height
var sliderheight="80px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''

leftrightslide[0]='<a title="BALLENA -MDF"hr="imagenes/ballena-mdf.jpg" onclick="return showPic(this)" ><img 

src="imagenes/ballena-mdf_th.jpg" border=1></a>'

leftrightslide[1]='<a title="CABALLO DE MAR MDF"hr="imagenes/caballodemarmdfbrillo.jpg" onclick="return showPic(this)" ><img 

src="imagenes/caballodemarmdfbrillo_th.jpg" border=1></a>'

leftrightslide[2]='<a title="BALLENART"hr="imagenes/ballenart.jpg" onclick="return showPic(this)" ><img 

src="imagenes/ballenart_th.jpg" border=1></a>'

leftrightslide[3]='<a title="CHIHUAHUA ACRILICO"hr="imagenes/chihuahuaacrilicosinfondo.jpg" onclick="return showPic(this)" 

><img src="imagenes/chihuahuaacrilicosinfondo_th.jpg" border=1></a>'


//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" 

style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" 

onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></div>

</div>
</body>
</html>

De antemano gracias

jcouoh · #7 (**permalink**) 25/03/2010, 11:42

Perdon olvide mencionar que quiero que cuando le haga clic al enlace mete_producto.php pueda llevar quiza con metodo get los datos de la imagen como titulo y id
Gracias nuevamente

jcouoh · #8 (**permalink**) 29/03/2010, 07:44

He estado tratando de dividir mis archivos para hacerlos pequeños y mas fáciles para modificar por lo que se los pongo aqui pues necesito una ayudita, he estado buscando la manera de hacer que el enlace me funcione adecuadamente pero no lo hace les pongo los archivos y les comento que me falta:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Compuseñal</TITLE>
<?php
include("include/seleccion-js.php");
?>
<link rel="stylesheet" type="text/css" href="librerias/estilo.css" />

<link rel="stylesheet" type="text/css" href="librerias/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="librerias/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="librerias/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="librerias/ddlevelsmenu.js">

/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>
<body>


<div id="maincontainer">

<div id="topsection"><img src="imagenes/logo_min.jpg"></div>



<div id="usuarios">

<div id="navizq">

</div>
<div id="navder">


<?php

include("menu-h-js.php");
?>

</div>

</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="borde">
<div class="inn">

<DIV class="placehold">
<P id=desc> &nbsp;</P>


<?php
include ("elprodcuto.php");
?>

 </DIV>







</form>

</div>
</div>
</div>
</div>
<div id="leftcolumn">


<?php
include ("menu-izq-js.php");
?>

</div>

<div id="footer"><?php

include("slide.php");
?>
</div>

</div>
</body>
</html>

el codigo de seleccion denominado seleccion-js.php es el siguiente:

Código HTML:

<script type="text/javascript" language="javascript">

function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.hr;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
 
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue

}
  return false;


 } else {
  return true;
 }



}
</script>

el codigo de la pagina elproducto.php es el siguiente:

Código HTML:

<center>

<?php
$ids = $_GET['showpic.id'];
echo "ids = " . $ids;
?>

<script type="text/javascript">

var id= 4;
var nombre = "casa";
var precio = 500;

</script>

<form name="formacar" action="producto.php" method="get">

<script type="text/javascript">


document.write("<input type=hidden name=nombre value='" + titulo + "'>");

</script>

</form>
<a href="#" onclick="send_form();return false"><IMG class=clear id=placeholder 
alt="" src="imagenes/logo3dzoofinal.jpg"></a> 

<script>
function send_form()
{ 


document.forms['formacar']['titulo'].value = titulo;


document.forms['formacar'].submit();
}
</script> 

</center>

y el codigo que me muestra los pics es el siguiente:

Código HTML:

<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="750px"
//Specify the slider's height
var sliderheight="80px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''

leftrightslide[0]='<a title="BALLENA -MDF" hr="imagenes/ballena-mdf.jpg" onclick="return showPic(this)" ><img src="imagenes/ballena-mdf_th.jpg" border=1></a>'

leftrightslide[1]='<a title="CABALLO DE MAR MDF" hr="imagenes/caballodemarmdfbrillo.jpg" onclick="return showPic(this)" ><img src="imagenes/caballodemarmdfbrillo_th.jpg" border=1></a>'

leftrightslide[2]='<a title="BALLENART" hr="imagenes/ballenart.jpg" onclick="return showPic(this)" ><img src="imagenes/ballenart_th.jpg" border=1></a>'

leftrightslide[3]='<a title="CHIHUAHUA ACRILICO" hr="imagenes/chihuahuaacrilicosinfondo.jpg" onclick="return showPic(this)" ><img src="imagenes/chihuahuaacrilicosinfondo_th.jpg" border=1></a>'


//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

como se puede ver al hacer clic en una imagen que se selecciona en el slide esta se muestra en un div (placeholder) lo cual es lo que necesito, pero al hacer clic en esa imagen, yo quisiera que se tome los datos que necesito de esa imagen como los que he puesto que son titulo, id y el href quiza por medio GET a la pagina nueva para usarlos posteriormente como valores. Les agradezco de antemano su apoyo en este pequeño problema para ustedes aunque para mi es muy grande.Gracias

jcouoh · #9 (**permalink**) 31/03/2010, 12:07

Nuevamente planteo lo que estoy haciendo, para ver si alguien puede ayudarme,

dada una imagen thumbnail con un enlace conteniendo identificadores, quisiera que al hacerle clic me muestre una imagen grande en un div, y este contenga un enlace el cual `pueda llevar a la url deseada los identificadores de la imagen.

Alguien puede ayudarme?

Gracias de antemano