Fare link su gif? (Un link per fotogramma)

[matti96]

Salve! Io ho un codice js (preso da un sito) che mi unisce 3 jpeg e le fa diventare tipo una che gif dopo un tot di tempo ed una transizione. Vorrei che se la prima img viene cliccata apre link 1, la seconda apre link 2 e la terza apre link 3.
Ecco il codice js:

HEAD:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var images = new Array ('immagini/12%20Marzo%202010.jpg','immagini/PEFY%20sito.jpg','immagini/incontro%20pastorale.jpg');
var index = 1;
function rotateImage()
{
$('.gif img').fadeOut(3000, function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><img width="600" height="450" src="immagini/12%20Marzo%202010.jpg" /></td>
</tr>
</table>
</div>
</div>





Il risultato deve venire come questo:
http://www.elim.org.uk/
nella zona centrale... Dove ci sono le immagini che scorrono. Se vengono cliccate danno un'altra pagina. Ogni link diverso per ogni immagine.
Grazie :)


Ah la stessa cosa si può fare con un testo? Ovvero:
Testo 1 apre link 1... Dopo un tot di secondi appare testo 2 che apre link 2... Dopo un tot di secondi appare testo 3 che apre link 3.... Ed infine si ricomincia da testo 1.

Grazie mille :)

[Marinelli]

Spostato nella sezione dedicata alla programmazione.

Ciao!

[black_wizard]

il sito in questione usa uno script slider assai comune..ce ne sono a centinaia che puoi usare già belli e fatti

cmq teoricamente il codice dovrebbe essere questo
Ho aggiunto un array per i link e la tag <a href nel codice prima dell'immagine.
Quando nel jquery cambia l'immagine..ce la chiamata di cambiare anche il link.

Io non l'ho provato..però dovrebbe essere fatto più o meno così.


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var images = new Array ('immagini/12%20Marzo%202010.jpg','immagini/PEFY%20sito.jpg','immagini/incontro%20pastorale.jpg');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif img').fadeOut(3000, function()
{
//aggiunto attr href
$('.gif a').attr('href', link[index]);
$(this).attr('src', images[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it"><img width="600" height="450" src="immagini/12%20Marzo%202010.jpg" /></a></td>
</tr>
</table>
</div>
</div>

[Cazzabubbola]

vabbè ma che c'entra la gif ora!

sono semplicemente immagini jpeg che vanno in successione con jquery...ce ne sono a pacchi di script del genere!

[matti96]

il sito in questione usa uno script slider assai comune..ce ne sono a centinaia che puoi usare già belli e fatti

cmq teoricamente il codice dovrebbe essere questo
Ho aggiunto un array per i link e la tag <a href nel codice prima dell'immagine.
Quando nel jquery cambia l'immagine..ce la chiamata di cambiare anche il link.

Io non l'ho provato..però dovrebbe essere fatto più o meno così.


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var images = new Array ('immagini/12%20Marzo%202010.jpg','immagini/PEFY%20sito.jpg','immagini/incontro%20pastorale.jpg');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif img').fadeOut(3000, function()
{
//aggiunto attr href
$('.gif a').attr('href', link[index]);
$(this).attr('src', images[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it"><img width="600" height="450" src="immagini/12%20Marzo%202010.jpg" /></a></td>
</tr>
</table>
</div>
</div>



Vero!! Bastava un pò di logica :) non lo so il js... Grazie mille :D

[matti96]

vabbè ma che c'entra la gif ora!

sono semplicemente immagini jpeg che vanno in successione con jquery...ce ne sono a pacchi di script del genere!


Vabbè... Per dire che erano delle immagini in sequenza :)

[matti96]

Ah, per farlo anziché con le img, con un testo come deve essere?

var ??? = new Array (testo','testo2','testo3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')

[black_wizard]

per farlo con del testo dovresti fare un array con i vari testi da mettere
e poi dovresti usare $('.gif a').html(testo[index]);
però non ne sono sicuro al 100%

[matti96]

per farlo con del testo dovresti fare un array con i vari testi da mettere
e poi dovresti usare $('.gif a').html(testo[index]);
però non ne sono sicuro al 100%

quindi sarebbe:

<script type="text/javascript">

var testo=new Array("1", "2","3");
$('.gif a').attr('href', link[index]);

</script>
oppure lo aggiungo al js precedente anziché farne uno nuovo?
Grazie :)
P.S. = Il testo dovrebbe essere con un link

[black_wizard]

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var testo = new Array ('1','2','3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).htmk(testo[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it">Prova Prova</a></td>
</tr>
</table>
</div>
</div>

dovrwebbe essere così---ad occhio.
Cmq il mio suggerimento è cercare uno script già bello e fatto che ne esistono a centinaia sul web che fanno quello che vuoi tu.

[matti96]

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var testo = new Array ('1','2','3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).htmk(testo[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it">Prova Prova</a></td>
</tr>
</table>
</div>
</div>

dovrwebbe essere così---ad occhio.
Cmq il mio suggerimento è cercare uno script già bello e fatto che ne esistono a centinaia sul web che fanno quello che vuoi tu.



Io dico che testo 1 da link 1, testo 2 link 2, testo 3 link 3 :)
ah per gli script già fatti che devo cercare? Grazie :D

[black_wizard]

lo script di sopra dovrebbe essere link1 testo1, link2 testo 2 etc etc
cerca jquery sliders su google..vedi quanti te ne escono.

[matti96]

lo script di sopra dovrebbe essere link1 testo1, link2 testo 2 etc etc
cerca jquery sliders su google..vedi quanti te ne escono.


Fin qui ( var testo = new Array ('1','2','3'); ) ci sono, il resto non ho capito... dove c'è

function rotateImage()
{
$('.gif img').fadeOut(3000, function()
{
//aggiunto attr href
$('.gif a').attr('href', link[index]);
$(this).attr('src', images[index]);
$(this).fadeIn('slow', function();
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});


Devo aggiungere
$('.gif a').html(testo[index]);
?
E verrebbe


$('.gif img').fadeOut(3000, function()
{
//aggiunto attr href
$('.gif a').attr('href', link[index]);
$(this).attr('src', images[index]);
$(this).fadeIn('slow', function();
$('.gif a').html(testo[index]);

? :)

[black_wizard]

devi cambiare così.
Tu non hai più il tag img.


function rotateImage()
{
$('.gif a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).html(testo[index]);
$(this).fadeIn('slow', function();
{
if (index == testo.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});

nei post precedenti avevo già scritto tutto correttamente.

[matti96]

devi cambiare così.
Tu non hai più il tag img.


function rotateImage()
{
$('.gif a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).html(testo[index]);
$(this).fadeIn('slow', function();
{
if (index == testo.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});

nei post precedenti avevo già scritto tutto correttamente.

Ma questo in uno script apparte?

[black_wizard]

o gesù...ma non riconosci il tuo codice??
Ripetiamo questo è il codice originale tuo già modificato in base a come lo volevi. Dovrebbe andare.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var testo = new Array ('1','2','3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).html(testo[index]);
$(this).fadeIn('slow', function()
{
if (index == testo.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it">Prova Prova</a></td>
</tr>
</table>
</div>
</div>

[malocchio]

Usate il tag

[matti96]

o gesù...ma non riconosci il tuo codice??
Ripetiamo questo è il codice originale tuo già modificato in base a come lo volevi. Dovrebbe andare.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var testo = new Array ('1','2','3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).html(testo[index]);
$(this).fadeIn('slow', function()
{
if (index == testo.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>

BODY:

<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it">Prova Prova</a></td>
</tr>
</table>
</div>
</div>




Grazie, ma c'è un problema. Se metto così, l'immagine c'è ma resta ferma. Se modifico BODY come hai detto tu scompare del tutto non essendoci il tag <img>

[matti96]

RISOLTO! Ho fatto 2 script diversi...


<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var images = new Array ('immagini/12%20Marzo%202010.jpg','immagini/PEFY%20sito.jpg','immagini/incontro%20pastorale.jpg');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif img').fadeOut(3000, function()
{
//aggiunto attr href
$('.gif a').attr('href', link[index]);
$(this).attr('src', images[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>


<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var testo = new Array ('1','2','3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.text a').fadeOut(3000, function()
{
//aggiunto attr href
$(this).attr('href', link[index]);
$(this).html(testo[index]);
$(this).fadeIn('slow', function()
{
if (index == testo.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>
</head>
<body>
<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it"><img width="600" height="450" src="immagini/12%20Marzo%202010.jpg" /></a></td>
</tr>
</table>
</div>
</div>
<br>


<div class="text">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it">Prova Prova</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>



GRAZIE MILLE :D

[black_wizard]

ma allora tu non ti sei spiegato per niente bene. Tu prima avevi detto che non volevi più l'immagine..ora vedo che invece volevi il link, l'immagine..e il testo.
Qui sotto il codice che racchiude il tutto..dovrebbe andare


<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
setInterval (rotateImage, 8000);
var images = new Array ('immagini/12%20Marzo%202010.jpg','immagini/PEFY%20sito.jpg','immagini/incontro%20pastorale.jpg');
var testo = new Array ('1','2','3');
var link = new Array ('http://www.google.it','http://www.hwupgrade.it','http://www.google.it')
var index = 1;
function rotateImage()
{
$('.gif img').fadeOut(3000, function()
{
//aggiunto attr href
$('.gif a').attr('href', link[index]);
$(this).attr('src', images[index]);
$(this).after(testo[index]);
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
});
</script>
</head>
<body>
<div class="gif">
<div align="center">
<table width="200" border="3" bordercolor="#0000FF">
<tr>
<td><a href="http://www.google.it"><img width="600" height="450" src="immagini/12%20Marzo%202010.jpg" />Prova Prova prova</a></td>
</tr>
</table>
</div>
</div>
<br>


</body>
</html>