[Risolto] Skin Più Popolari


Risolto [Risolto] Skin Più Popolari

Messaggio Da MattiaDes Lun 13 Dic 2010 - 23:04

Salve ragazzi :)
Avete presente il widget che c'è qui su forum attivo, quello delle skin più popolari.
Io vorrei ottenere lo stesso effetto.
Molto gentilmente the crow mi ha fornito il codice, eccolo:

Spoiler:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 300px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 170px; height: 300px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 50px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #ffffff}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
var counts = 5;
img1 = new Image();
img1.src = 'https://2img.net/r/ihimizer/img222/4057/darkcorners.gif';
img2 = new Image();
img2.src = 'https://2img.net/r/ihimizer/img195/4880/wendywuguerrieraallepri.gif';
img3 = new Image();
img3.src = 'https://2img.net/r/ihimizer/img683/2455/14kilometros.gif';
img4 = new Image();
img4.src = 'https://2img.net/r/ihimizer/img401/5674/yinyangmaster.gif';
img5 = new Image();
img5.src = 'https://2img.net/r/ihimizer/img521/285/2020targetcriminale.jpg';

var smallImg = new Array();
smallImg[0] = 'https://i.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'https://i.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'https://i.servimg.com/u/f60/12/10/25/45/index_12.gif';
smallImg[3] = 'https://i.servimg.com/u/f63/11/73/76/86/index_10.gif';
smallImg[4] = 'https://i.servimg.com/u/f63/11/73/76/86/index_11.gif';

url1 = 'url pagina 1';
url2 = '------ 2';
url3 = '---- 3';
url4 = '------ 4';
url5 = '------5';

alt1 = new Image();
alt1.alt = ' titolo immagine 1';
alt2 = new Image();
alt2.alt = 'titolo immagine 2';
alt3 = new Image();
alt3.alt = 'titolo immagine 3';
alt4 = new Image();
alt4.alt = 'titolo immagine 4';
alt5 = new Image();
alt5.alt = 'titolo immagine 5';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}

for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT>

Ho capito come cambiare le immagini da inserire, ma ho due problemi:
1) Non so dove devo mettere il link per collegare le immagini ad una pagina, infatti se ci clicco mi porta all'index
2) Le immagini che ci metto me le ridimensiona ... come risolvere questo problema ?

Grazie in anticipo :)



Ultima modifica di MOD-fenice il Mer 15 Dic 2010 - 15:37, modificato 1 volta
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 25
Messaggi : 4705
Località : Italy

Visualizza il profilo http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da the crow Mar 14 Dic 2010 - 1:15

ti ho scritto tutto...per non farti ridimensionare le immagini devi devi smanettare qui
Codice:
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 300px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 170px; height: 300px}
...ecco fatto la pappa e' pronta...come ti ho gia' detto ieri bastava solo LEGGERE dentro il codice...se non avete voglio di fare neanche questo...siamo messi proprio male
the crow
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 29
Messaggi : 8782
Località : Roma

Visualizza il profilo https://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da eddy Mar 14 Dic 2010 - 7:01

ottimo crow ma si puo' ingrandire il riquadro?
eddy
eddy
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 71
Messaggi : 334
Località : campania

Visualizza il profilo http://sangiorgiodelsannio.forumattivo.com/
eddy è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da MattiaDes Mar 14 Dic 2010 - 7:38

no crow, ovvio non voglio la pappa pronta ;-)
anche perchè tu non puoi sapere qual'è il risultato preciso che voglio ottenere, riguardo al problema delle dimensiono l'ho risolto :)
adesso ci sarebbe quello di collegare le immagini ai link io ho fatto così:

Codice:
img1 = new Image(link);
img1.src = 'http://i64.servimg.com/u/f64/15/84/48/29/avatar14.png';
img2 = new Image(link);
img2.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922311.png';
img3 = new Image(link);
img3.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922324.png';
img4 = new Image(link);
img4.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922331.png';
img5 = new Image(link);
img5.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922329.png';

dove ho messo la parola link ci ho messo il link, solo che non mi funziona :S
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 25
Messaggi : 4705
Località : Italy

Visualizza il profilo http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da Insane Mar 14 Dic 2010 - 10:15

Codice:
url1 = 'url pagina 1';
url2 = '------ 2';
url3 = '---- 3';
url4 = '------ 4';
url5 = '------5';
i link li devi inserire qui :good:
Insane
Insane
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 29
Messaggi : 4176
Località : Varese

Visualizza il profilo https://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da MattiaDes Mar 14 Dic 2010 - 18:15

per centrare le immagini nel widget ? io ho fatto così, ma non funziona

Codice:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 180px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 150px; height: 170px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 50px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #ffffff}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
var counts = 5;<div style="text-align: center;">img1 = new Image();
img1.src = 'http://i64.servimg.com/u/f64/15/84/48/29/immagi54.png';
img2 = new Image();
img2.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922340.png';
img3 = new Image();
img3.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922324.png';
img4 = new Image();
img4.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922341.png';
img5 = new Image();
img5.src = 'http://i64.servimg.com/u/f64/15/84/48/29/12922342.png';</div>

var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
smallImg[3] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_10.gif';
smallImg[4] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_11.gif';

url1 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url2 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url3 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url4 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';
url5 = 'http://www.habbolifeforum.com/catalogo-habbo-f31/furni-ghiaccialo-t3237.htm';

alt1 = new Image();
alt1.alt = ' titolo immagine 1';
alt2 = new Image();
alt2.alt = 'titolo immagine 2';
alt3 = new Image();
alt3.alt = 'titolo immagine 3';
alt4 = new Image();
alt4.alt = 'titolo immagine 4';
alt5 = new Image();
alt5.alt = 'titolo immagine 5';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}

for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT>
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 25
Messaggi : 4705
Località : Italy

Visualizza il profilo http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da the crow Mar 14 Dic 2010 - 22:41

Non devi centrare le immagini ma tutto il codice all'interno del widget e questo lo devi fare dall'esterno del codice
Codice:
<center> codice </center>
Domanda: ma non ti conviene ingrandire la struttura del codice quando la grandezza del widget?

xeddy: si devi smanettare all'interno del codice il mio e' impostato cosi'

Codice:
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 300px}
.picshow_main { position: relative; width: 170px; height: 300px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 170px; height: 300px}
the crow
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 29
Messaggi : 8782
Località : Roma

Visualizza il profilo https://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da eddy Mar 14 Dic 2010 - 22:51

:bene:
eddy
eddy
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 71
Messaggi : 334
Località : campania

Visualizza il profilo http://sangiorgiodelsannio.forumattivo.com/
eddy è stato ringraziato dall'autore di questo topic.

Risolto Re: [Risolto] Skin Più Popolari

Messaggio Da MattiaDes Mer 15 Dic 2010 - 15:36

grazie per l'aiuto
scusa the-crow se ti ho disturbato, sposto su risolto.
grazie ancora
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 25
Messaggi : 4705
Località : Italy

Visualizza il profilo http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.