Log in

View Full Version : Problema Javascript...


Shub
2nd December 2010, 12:36
Ormai sono 10 anni che non tocco html e js e non mi ricordo una cicciola.

Ecco il mio problema.

Devo fare una pagina, ho strutturato un frame suddiviso in parte sinistra (pulsantiera), parte centrale (dove si sviluppa il sito) e parte in basso (dove ho un testo a scorrimento).

Il mio problema è che la pulsantiera di sinistra, composta da delle semplici jpg quando ci passo sopra mi cambino di colore i vari pulsanti e utilizzo l'evento onmouseover ma il problema arriva quando li clicco.

Voglio che il pulsante attivo mi cambi colore e rimanga di quel colore fino a quando non clicco su un'altro pulsante.

Un mi riesce di usare l'evento onclick....credo devo crearmi uno script java...ma non ci cavo le gambe.

Sapete darmi mana???
Tanek
2nd December 2010, 12:42
Domanduzza: ma quando clicchi non stai modificando la pagina del frame centrale? Con anche un bel reload della pagina immagino, no?
Senza smanettare troppo con JS, ti gestisci un hidden nel frame centrale con cui sai quale sezione è attiva (perchè poi è quello il problema immagino, vedere il colore diverso della sezione attiva).
Ma sono solo HTML o dietro c'è qualcosa?
Shub
2nd December 2010, 12:56
Il frame centrale cambia normalmente cliccando su uno dei pulsanti della pulsantiera di sinistra, basta nel tag <a href=""> del pulsante mettere l'opzione target="" che tu hai evidenziato nella parte centrale del frame con l'opzione name="", quindi il problema non è quello.

Il problema è solo che data una pulsantiera con i pulsanti A B C D, se passo su A mi diventa da giallo blu, se passo su B mi torna A giallo e diventa B blu (ho usato l'opzione onmouseover) ma il problema è...

Quando clicco sul pulsante A voglio che il pulsante mi diventi nero e così rimanga fino a quando non clicco su un'altro pulsante.

Lascia stare cosa succede nel frame della parte centrale, quella la gestisco con un normalissimo HTML.

Il discorso hidden non l'ho mai usato ma la pulsantiera deve rimanere sempre attiva, se la gente si vuole spostare i pulsanti devono "rollare" al passaggio del mouse.
Metrox
2nd December 2010, 13:03
ma invece di stare ad impazzire col js non ti conviene fare una classe css che ti gestisce l'hover il visited e compagnia bella?



edit: *
Shub
2nd December 2010, 13:10
I pulsanti sono delle immagini, non sono delle scritte che gestisco con i tag nel body o in un css, per intenderci non posso usare alink, link e vlink ecc...

I Css dinamici esempio non sono supportati da IE quindi non posso nemmeno usare i nuovi comandi (che comunque non conosco) per gestire i menù in modo dinamico.

Semplicemente data l'immagine A se la clicco deve diventare nera e rimanerci fino a quando non clicco sull'immagine B.

Stop
Tanek
2nd December 2010, 13:23
E allora sull'onclick di ogni immagine devi metterci un metodino JS in cui fai un check di tutte le immagini (non solo di quella selezionata) con un oggetto javascript (della pagina, non del metodo) che all'interno si memorizza l'id o il name o quello che vuoi per capire dove hai cliccato.

ps: se ricarichi il frame sparisce tutto però ovvio.
Shub
2nd December 2010, 13:27
E ce lo so ma non mi ricordo un cazzo!!! Ci ho provato ma ho combinato un puttanaio che ovviamente non funziona...

<html>
<head>
<Title> Prova </title>

<script>

function init() {
poptex1 = poptextdiv1.style;
poptex2 = poptextdiv2.style;
poptex3 = poptextdiv3.style;
poptex4 = poptextdiv4.style;
poptex5 = poptextdiv5.style;
poptex6 = poptextdiv6.style;
}

var tabshow1=0;
var tabshow2=0;
var tabshow3=0;
var tabshow4=0;
var tabshow5=0;
var tabshow6=0;

function showhidepop1() {
hideall();

if (tabshow1 == 0) {
{
poptext1.visibility = "visible";
tabshow1 = 1;

}
}
}

function showhidepop2() {
hideall();

if (tabshow2 == 0) {
{
poptext2.visibility = "visible";
tabshow2 = 1;

}
}
}

function showhidepop3() {
hideall();

if (tabshow3 == 0) {
{
poptext3.visibility = "visible";
tabshow3 = 1;

}
}
}

function showhidepop4() {
hideall();

if (tabshow4 == 0) {
{
poptext4.visibility = "visible";
tabshow4 = 1;

}
}
}

function showhidepop5() {
hideall();

if (tabshow5 == 0) {
{
poptext5.visibility = "visible";
tabshow5 = 1;

}
}
}

function showhidepop6() {
hideall();

if (tabshow6 == 0) {
{
poptext6.visibility = "visible";
tabshow6 = 1;

}
}
}

function hideall() {

{
poptext1.visibility = "hidden";
poptext2.visibility = "hidden";
poptext3.visibility = "hidden";
poptext4.visibility = "hidden";
poptext5.visibility = "hidden";
poptext6.visibility = "hidden";
tabshow1 = 0;
tabshow2 = 0;
tabshow3 = 0;
tabshow4 = 0;
tabshow5 = 0;
tabshow6 = 0;

}
}
</script>

<style>
#poptextdiv1 {
font-family:tahoma,arial,geneva;
visibility:hidden;
position:absolute;
top:4px;
left:4px;
z-index:3;
width:180;
}

#poptextdiv2 {
font-family:tahoma,arial,geneva;
visibility:hidden;
position:absolute;
top:26px;
left:4px;
z-index:3;
width:180;
}

#poptextdiv3 {
font-family:tahoma,arial,geneva;
visibility:hidden;
position:absolute;
top:48px;
left:4px;
z-index:3;
width:180;
}

#poptextdiv4 {
font-family:tahoma,arial,geneva;
visibility:hidden;
position:absolute;
top:70px;
left:4px;
z-index:3;
width:180;
}

#poptextdiv5 {
font-family:tahoma,arial,geneva;
visibility:hidden;
position:absolute;
top:92px;
left:4px;
z-index:3;
width:180;
}

#poptextdiv6 {
font-family:tahoma,arial,geneva;
visibility:hidden;
position:absolute;
top:114px;
left:4px;
z-index:3;
width:180;
}

</style>
</head>

<body bgcolor="#ffffff" onload="init()">

&nbsp

<div align="left" style="position:absolute; left:0px; top:20px;">
<table border="1" cellpadding="0">
<tr>
<td><a href="#" target="centrale" onclick="hideall();showhidepop1();">
<img src="1.jpg" width="180" height="18" alt="" border="0"></a>
</td>
</tr>
<tr>
<td><a href="#" target="centrale" onclick="hideall();showhidepop2();">
<img src="1.jpg" width="180" height="18" alt="" border="0"></a>
</td>
</tr>
<tr>
<td><a href="#" target="centrale" onclick="hideall();showhidepop3();">
<img src="1.jpg" width="180" height="18" alt="" border="0"></a>
</td>
</tr>
<tr>
<td><a href="#" target="centrale" onclick="hideall();showhidepop4();">
<img src="1.jpg" width="180" height="18" alt="" border="0"></a>
</td>
</tr>
<tr>
<td><a href="#" target="centrale" onclick="hideall();showhidepop5();">
<img src="1.jpg" width="180" height="18" alt="" border="0"></a>
</td>
</tr>
<tr>
<td><a href="#" target="centrale" onclick="hideall();showhidepop6();">
<img src="1.jpg" width="180" height="18" alt="" border="0"></a>
</td>
</tr>

</table>
</div>

<div id=poptextdiv1>
<img src="2.jpg" weight="180" height="18" alt="" border="0">
</div>

<div id=poptextdiv2>
<img src="2.jpg" weight="180" height="18" alt="" border="0">
</div>

<div id=poptextdiv3>
<img src="2.jpg" weight="180" height="18" alt="" border="0">
</div>

<div id=poptextdiv4>
<img src="2.jpg" weight="180" height="18" alt="" border="0">
</div>

<div id=poptextdiv5>
<img src="2.jpg" weight="180" height="18" alt="" border="0">
</div>

<div id=poptextdiv6>
<img src="2.jpg" weight="180" height="18" alt="" border="0">
</div>

</body>
</html>
Metrox
2nd December 2010, 13:34
prova questo te l'ho fatto sul momento

Creati un file html e eseguilo.

L'immagine chiama una funzione js e gli passa l'id ( in questo caso pippo).
La funzione cerca l'immagine pippo e gli modifica l'attributo src .

Intendevi una cosa del genere?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script type="text/javascript">
function cambia_immagine(id_immagine)
{
document.getElementById(id_immagine).setAttribute( 'src','http://www.wayne2k1.com/images/ugly4/misc/logo.png')
}
</script>
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<img id="pippo" src="http://www.google.it/intl/en_com/images/srpr/logo1w.png" onclick=cambia_immagine('pippo') />
</body>
</html>
Shub
2nd December 2010, 13:50
si questo, ora devo vedere se associando altre immagini non succedono casini, perchè ora mi mancherebbe una sorta di funzione hideall o pulisci che riporta la situazione a 0 quando clicco su un'altro pulsante.

E che cazz...ora non mi funge l'onmouseover :sneer:
Metrox
2nd December 2010, 13:56
si questo, ora devo vedere se associando altre immagini non succedono casini, perchè ora mi mancherebbe una sorta di funzione hideall o pulisci che riporta la situazione a 0 quando clicco su un'altro pulsante.

guarda visto che stai facendo una pulsantiera (quindi immagino saranno 10 pulsanti?!)

Li richiami uno per uno e li reimposti al valore di default.

Poi chiami l'unico da cambiare e vaffanculo



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script type="text/javascript">
function cambia_immagine(id_immagine)
{

document.getElementById('id_immagine_1').setAttrib ute('src','http://www.google.it/intl/en_com/images/srpr/logo1w.png')
document.getElementById('id_immagine_2').setAttrib ute('src','http://www.google.it/intl/en_com/images/srpr/logo1w.png')
document.getElementById('id_immagine_3').setAttrib ute('src','http://www.google.it/intl/en_com/images/srpr/logo1w.png')
document.getElementById('id_immagine_4').setAttrib ute('src','http://www.google.it/intl/en_com/images/srpr/logo1w.png')
document.getElementById('id_immagine_5').setAttrib ute('src','http://www.google.it/intl/en_com/images/srpr/logo1w.png')


document.getElementById(id_immagine).setAttribute( 'src','http://www.wayne2k1.com/images/ugly4/misc/logo.png')
}
</script>
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<img id="pippo" src="http://www.google.it/intl/en_com/images/srpr/logo1w.png" onclick=cambia_immagine('pippo') />
</body>
</html>


ovviamente gli id "id_immagine_1" , "id_immagine_2" ecc saranno gli id delle immagini della tastiera.

Se invece i pulsanti aumentano e non sono statici allora li farei un ciclo che ti carica tutte le immagini e te le cambia..ma li c'è da perderci un pò di tempo
Shub
2nd December 2010, 13:58
I pulsanti sono statici, rimangono sempre loro e l'unico attributo che devono avere è l'onmouseover e stop.

Poi caricano una pagina e fine li..ora li provo se ho ancora bisogno ti rirompo, ma spero di no :)

Grazie mille già da ora.
Amiag
2nd December 2010, 14:03
visto che puo' essere premuto un solo pulsante per volta, ti basta un unica variabile globale,

var bottone_premuto;

nell'onclick di ogni pulsante:

function(){

if(bottone_premuto && bottone_premuto!=null){
//resetta bottone premuto
}

//premi questo bottone

bottone_premuto = this;
}


questo se non ho capito male ...
Shub
2nd December 2010, 14:18
mi son perso....

il pulsante a deve diventare il pulsante a1 mentre b, c, d, e ed f rimangono fermi.
se clicco su b, a1 deve tornare a, b deve diventare b1, c, d, e ed f rimangono fermi e così via.

possibilmente se passo con il mouse su a, b, c, d, e ed f devono diventare aover, bover ecc....

Quindi per ora usando quello che ha messo metrox riesco a far cambiare a in a1 ma anche b mi diventa a1...e non mi funge l'onmouseover....
Metrox
2nd December 2010, 15:44
mi son perso....
il pulsante a deve diventare il pulsante a1 mentre b, c, d, e ed f rimangono fermi.
se clicco su b, a1 deve tornare a, b deve diventare b1, c, d, e ed f rimangono fermi e così via.
possibilmente se passo con il mouse su a, b, c, d, e ed f devono diventare aover, bover ecc....
Quindi per ora usando quello che ha messo metrox riesco a far cambiare a in a1 ma anche b mi diventa a1...e non mi funge l'onmouseover....
cosa intendi non ti funge l'onmouseover?
se esegui la funzione onmouseover invece che onclick funziona.
Comunque per quanto riguarda a in a1 e b in a1 ti tocca parametrizzare l'immagine che vuoi visualizzare.
O nella funzione gli passi un altro parametro con il nome della nuova immagine o te li definisci all'interno della funzione e a seconda dell'id li usi.
io farei però così


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script type="text/javascript">
function cambia_immagine(id_immagine,nome_img){
document.getElementById(id_immagine).setAttribute( 'src',nome_img);
}
function torna_immagine(id_immagine){
document.getElementById(id_immagine).setAttribute( 'src','http://www.google.it/intl/en_com/images/srpr/logo1w.png');
}
</script>
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<img id="pippo" src="http://www.google.it/intl/en_com/images/srpr/logo1w.png" onmouseout=torna_immagine('pippo') onmouseover=cambia_immagine('pippo','http://www.wayne2k1.com/images/ugly4/misc/logo.png') />
</body>
</html>


in pratica ora nella funzione oltre a passargli l'id gli passi anche il nome dell'immagine da caricare.

Poi non ho capito perchè puoi avere solo l'onmouseover.

Ti ho aggiunto anche l'onmouseout che ti riporta la situazione all'imagine precedente.

Comunque è una soluzione che funziona ma non è proprio una roba elegante :sneer:
Hador
2nd December 2010, 15:46
c'è il tag code shub è_é
cmq ho capito che devi fare, ma non so aiutarti :sneer:
Shub
3rd December 2010, 16:36
Metrox hai la inbox di wayne piena, cmq provo a far da me lunedi che ora vo a casa.
Se non ci riesco di mando l'html.

Grazie ancora.
Mez
3rd December 2010, 17:38
<html>
<head>
<title>
blablabla
</title>
<script language="JavaScript">

Rollimage = new Array()

Rollimage[0]= new Image(121,153)
Rollimage[0].src = "aperto.jpg"

Rollimage[1] = new Image(121,153)
Rollimage[1].src = "chiuso.jpg"

function SwapOut(){
document.Rupert.src = Rollimage[1].src;
return true;
}

function SwapBack(){
document.Rupert.src = Rollimage[0].src;
return true;
}

// - stop hiding -->
</script>
</head>

<body>
<p align="center">
<a href="#"
onmouseover="SwapOut()"
onmouseout="SwapBack()">
<img src="tuaimmagine.jpg"
name=""
width=xxx
height=xxx
border=0>
</a>
</p>
</body>
</html>

con i css non puo fare il rollover se quando è nella pagina vuole l'effetto attivo, puo farlo con il php volendo, piu facile e meno rognoso di tutta sta pappardella java

poi ovviamente adattalo alle tue esigenze
ps: l css fallo tutto in un foglio a parte, mai nel index.page del sito, consiglio personale ovvio
Shub
7th December 2010, 15:29
Metrox hai la box piena...cmq :)

Fai con comodo non ci sono problemi :D
Grazie mille ancora

Mez grazie mille delle dritte, ho fatto 2 style css ma mi ero dimenticato di cancellare la roba dall'html e mettere il link stylesheet... :)