Loghi con un click

« Older   Newer »
  Share  
max_400
view post Posted on 11/4/2012, 13:09     +1   -1




negli altri forum usano uno slide scorrevole col (marquee) ma ame non piace perchè
si muove a scatti e poi rallenta il caricamento della pagina...

avevo pensato qualkosa tipo con un click cambiano i loghi

CODICE
<script>
function cambia(a){
document.getElementById('banana').src=a;
}
</script>

<img id="banana" src="http://andrea91.comule.com/enterprise-A-costitution.jpg" width=181 height=50>
<a href="#" onclick="cambia('http://andrea91.comule.com/mrwebmaster.jpg')"><font color="#0099FF">1 - </font></a>
<a href="#" onclick="cambia('http://andrea91.comule.com/001design_it_181x86r.gif')"><font color="#0099FF"> 2</font></a>



loghi2s

Se guardi l'homepage, cara Valeria, vedrai i numeri 1-2 cliccando su di essi cambia il primo logo (angolo dell'amicizia) in Mr.Webmaster.

li dovrei cambiare tutti.
quindi quei 5 loghi scompaiono e compaiono
gli altri 2 loghi Mr.Webmaster e 001Design.it

in pratica si potrebbe fare <img src=" "..... per gli ultimi 3

Comunque se ti và, cara Valeria, mi fai uno script con le tue zampette?

Grazie e un bacio :bacio:


:uller:

Er Founder :capt:
Max_400






up

Edited by max_400 - 14/4/2012, 02:58
 
Top
Vale2
view post Posted on 12/4/2012, 14:38     +1   -1




Ciao Max

devi aggiungere nuove variabili nella function (a,b,c,d,e)

ogni immagine deve avere un suo ID

<img src="" id="banana"> <img src="" id="banana1"> ecc...

a banana corrisponde src=a, a banana1 corrispone src=b, a banana4 corrisponde src=e

Per il cambio di tutte le immagini all'onclick tra gli apici singoli le immagini da sostituire

ES:

CODICE
onclick="cambia('immagine01.jpg','immagine02.jpg','immagine03.jpg','immagine04.jpg','immagine05.jpg')


immagine01.jpg = src a e id banana prima immagine a sinistra, immagine5.jpg = src=e id banana4

CODICE
<script type="text/javascript">
function cambia(a,b,c,d,e){
document.getElementById('banana').src=a;
document.getElementById('banana1').src=b;
document.getElementById('banana2').src=c;
document.getElementById('banana3').src=d;
document.getElementById('banana4').src=e;
}
</script>

<img id="banana" src="immagine01.jpg" width=200 height=120> <img id="banana1" src="immagine02.jpg" width=200 height=120> <img id="banana2" src="immagine03.jpg" width=200 height=120> <img id="banana3" src="immagine04.jpg" width=200 height=120> <img id="banana4" src="immagine05.jpg" width=200 height=120>
<a href="#" onclick="cambia('immagine05.jpg','immagine04.jpg','immagine03.jpg','immagine02.jpg','immagine01.jpg');return false"><font color="#0099FF">1</font></a> -
<a href="#" onclick="cambia('immagine01.jpg','immagine02.jpg','immagine03.jpg','immagine04.jpg','immagine05.jpg');return false"><font color="#0099FF">2</font></a>


quando si usa in un tag href il # è bene aggiungere una dichiarazione return false il # è un link a tutti gli effetti, pur funzionando correttamente apre il link in una nuova pagina abilitando il tasto Indietro del Browser.

Esempio on-line

http://vale2.brinkster.net/esempi/max_400/

O usato l'inversione delle immagini e il cambio sulla seconda e quarta perché non ne ho altre, basta mettere le immagini che interessano.

Saluti, Valeria. :ciao:
 
Top
max_400
view post Posted on 12/4/2012, 23:57     +1   -1




ok grazie valeria lo script è perfetto però l'esempio mi cambia pagina, cioè apre una nuova scheda.

Adesso risolvo alcuni problemi poi vedo in seguito...
tu intanto continua a fare la scrittrice...ed io il tuo editore

Però mi raccomando non ti stancare...

un bacio ciao :bacio:
 
Top
Vale2
view post Posted on 13/4/2012, 13:31     +1   -1




CITAZIONE (max_400 @ 13/4/2012, 00:57) 
ok grazie valeria lo script è perfetto però l'esempio mi cambia pagina, cioè apre una nuova scheda.

Adesso risolvo alcuni problemi poi vedo in seguito...
tu intanto continua a fare la scrittrice...ed io il tuo editore

Però mi raccomando non ti stancare...

un bacio ciao :bacio:

Ciao, Max

hai il js scritto cosi, come nel post:

CODICE
<!-- sotto i loghi -->
<script type="text/javascript">
function cambia(a){
document.getElementById('banana').src=a;
}
</script>


il link all'immagine:

CODICE
<a href="#" onclick="cambia('http://andrea91.comule.com/mrwebmaster.jpg')"><span style="color: rgb(0, 153, 255);"><b>1</b> - </span></a>
<a href="#" onclick="cambia('http://andrea91.comule.com/001design_it_181x86r.gif')"><span style="color: rgb(0, 153, 255);"> <b>2</b></span></a>


cambia la prima immagine a sinistra, su 1 e 2 ma la url non cambia, rimane sempre quella inserita nel tag <a href=""><img

che è

CODICE
http://angolodellamicizia.forumfree.it/


Quindi oltre alla sostituzione delle immagini vanno inserite anche le URL di quello specifico banner.

se usi ul # cancelletto in un

CODICE
<a href="#">LINK</a>


ti esegue lo script ma essendo il # un link ti apre una nuova pagina attivando il tasto Indietro.

CODICE
<a href="#" onclick="nome_funzione();return false">LINK</a>


Ho fatto una prova in una sezione del forum cliccando si 1 o su 2 risposta: conta non è definito, come se non ci fosse il JS.

Nelle sezioni del forum la frase conta è utilizzata per altro scopi c'è già una variabile con quel nome.

Ho sistemato lo script, inserendo le URL per ogni banner nel JS e aggiunto il tag <title


CODICE
<script type="text/javascript">
function cambia(a,b,c,d,e){
document.getElementById('banana').src=a;
document.getElementById('banana1').src=b;
document.getElementById('banana2').src=c;
document.getElementById('banana3').src=d;
document.getElementById('banana4').src=e;
if(document.getElementById) {
document.getElementById('banana').title="Max400 Javascript";
document.getElementById('banana1').title="Asp by Valeria";
document.getElementById('banana2').title="Aruba";
document.getElementById('banana3').title="Altervista";
document.getElementById('banana4').title="Blender";
}
if(document.getElementsByTagName) {
for(i=0; i < document.getElementsByTagName("title").length; i++)
if(document.getElementsByTagName("title")[i] == "banana")
document.getElementsByTagName("title")[i];
}
}
function cambia_link(){
if(document.getElementById) {
document.getElementById('pesca').href="http://max400.forumfree.it/?f=7299006";
document.getElementById('pesca1').href="http://max400.forumfree.it/?f=7299011";
document.getElementById('pesca2').href="http://www.aruba.it/";
document.getElementById('pesca3').href="http://it.altervista.org/";
document.getElementById('pesca4').href="http://www.blender.org/";
}
}
function cambia1(a,b,c,d,e){
document.getElementById('banana').src=a;
document.getElementById('banana1').src=b;
document.getElementById('banana2').src=c;
document.getElementById('banana3').src=d;
document.getElementById('banana4').src=e;
if(document.getElementById) {
document.getElementById('banana').title="Subito.it";
document.getElementById('banana1').title="Digilander";
document.getElementById('banana2').title="GLS Italy";
document.getElementById('banana3').title="Hotscript";
document.getElementById('banana4').title="Dinamic Dynamic Dirive DHTML";
}
if(document.getElementsByTagName) {
for(i=0; i < document.getElementsByTagName("title").length; i++)
if(document.getElementsByTagName("title")[i] == "banana")
document.getElementsByTagName("title")[i];
}
}
function cambia_link1(){
if(document.getElementById) {
document.getElementById('pesca').href="http://www.subito.it";
document.getElementById('pesca1').href="http://digilander.libero.it/";
document.getElementById('pesca2').href="http://www.gls-italy.com/index_noreg.asp";
document.getElementById('pesca3').href="http://www.hotscripts.com/";
document.getElementById('pesca4').href="http://www.dynamicdrive.com/";
}
}
</script>
<a href="http://www.libero.it/" id="pesca"><img id="banana" src="immagine01.jpg" width=160 height=90  title="Libero Infostrada"></a> <a href="http://www.ebay.it" id="pesca1"><img id="banana1" src="immagine02.jpg" width=160 height=90 title="eBay"></a> <a href="http://max400.forumfree.it/" id="pesca2"><img id="banana2" src="immagine03.jpg" width=160 height=90 title="Forum Max_400"></a> <a href="http://forum.mrwebmaster.it/" id="pesca3"><img id="banana3" src="immagine04.jpg" width=160 height=90 title="Forum Mr. Webnaster"></a> <a href="http://www.google.it/" id="pesca4"><img id="banana4" src="immagine05.jpg" width=160 height=90 title="Google"></a>
<a href="#" onclick="cambia('1.jpg','2.jpg','3.jpg','4.jpg','01.jpg');cambia_link();return false"><font color="#0099FF">1</font></a> -
<a href="#" onclick="cambia1('1.gif','2.gif','3.gif','4.gif','5.gif');cambia_link1();return false"><font color="#0099FF">2</font></a>



Per ogni link 1 e 2 servono due funzioni.

Esempio om-line è il link scritto sopra sostituito:

http://vale2.brinkster.net/esempi/max_400/

Saluti, valeria :ciao:

Edited by Vale2 - 13/4/2012, 15:46
 
Top
3 replies since 11/4/2012, 13:03   82 views
  Share  
 

Javascript
 

Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumFree