rollover jquery

**gaten** · 02-09-2011, 01:15

salve ragazzi ho il seguente codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>hovered - selected</title>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <style type="text/css"> 
        #vynil
        {
            width:86px;
            height:33px;
            cursor:pointer;
			background-image:url(pulsante%20non%20selezionato.png);
        }
        
        #vynil.hovered
        {
            background-image: url(pulsante%20selezionato_cursore%20sopra.png);
        }
        
        #vynil.selected
        {
            background-image: url(pulsante%20selezionato_pennello.png);
        }
		
        #digital
        {
            width:86px;
            height:33px;
            cursor:pointer;
			background-image: url(pulsante%20non%20selezionato_02.png);
        }
        
        #digital.hovered
        {
            background-image: url(pulsante%20selezionato_cursore%20sopra02.png);
        }
        
        #digital.selected
        {
            background-image: url(pulsante%20selezionato_pennello_02.png);
        }		
    </style>
    <script type="text/javascript">
        $(function() {
            $("#vynil").hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            }).click(
                function() {
                    $("#digital").removeClass("selected");
                    $(this).addClass("#vynil.selected");
                }
            );
        });
		
		$(function() {
            $("#digital").hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            }).click(
                function() {
                    $("#digital").removeClass("#digital.selected");
                    $(this).addClass("selected");
                }
            );
        });
    </script>
</head>

<body>
    <div id="vynil">
        
    </div>
    
    <div id="digital">
        
    </div>
</body>

</html>

Praticametne quando vado sui pulsanti mi carica l'immagine in hover, quando clicco resta selezionata però il problema è:

Quando clicco vynil, non resta l'immagine selezionata, mentre quando clicco digital va bene, poi clicco vynil si deseleziona digital ma non resta selezionata vynil.
Come posso risolvere?

**Xinod** · 02-09-2011, 01:51

Originariamente inviato da gaten
...
$(this).addClass("#vynil.selected");
...
$("#digital").removeClass("#digital.selected");
...

in entrambi i casi tra doppi apici dovresti avere solo "selected"

**gaten** · 02-09-2011, 11:27

Si ora va bene,

Xinod, ma si potrebbe ottimizzare il tutto, cioè invece di riprodurre la funzione per digital posso usarne una sola che gestisca la stessa cosa???

**Xinod** · 02-09-2011, 11:46

e certo!
- non ti interessa sapere se selected fosse vynil o digital, a te interessa richiamare
$('.selected').removeClass('selected');

- per settare i comportamenti su tutti i div interessati assegna ad essi una classe

codice:

$('.classeDiv').hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            })
            .click(function() {
                    $('.selected').removeClass("selected");
                    $(this).addClass(".selected");
            });

- $(function() { ... }) e' un surrogato del document.ready, o DOMload
non e' errato averne piu' di uno per documento, ma specialmente per settare lo stesso tipo di comportamento ne basta uno

ciao

**gaten** · 02-09-2011, 12:01

Aspetta però io ad esempio devo avere VYNIL e DYGITAL uno affianco all'altro, e poi quando io clicco, richiamo due immagini diverse.

**Al_katraz984** · 02-09-2011, 12:02

non è tutto molto piu semplice con i css per l'hover?? il clic magari anche in jquery ma l'hover..

**Xinod** · 02-09-2011, 12:10

e se lui volesse estendere la compatibilita' anche ad IE6 che di per se' supporta l' hover solo sui link?

**Xinod** · 02-09-2011, 12:15

Originariamente inviato da gaten
Aspetta però io ad esempio devo avere VYNIL e DYGITAL uno affianco all'altro, e poi quando io clicco, richiamo due immagini diverse.

e' tutto nel css!

**gaten** · 02-09-2011, 12:24

Ho provato a fare così:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>hovered - selected</title>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <style type="text/css"> 
        #vynil
        {
            width:86px;
            height:33px;
            cursor:pointer;
			background-image:url(pulsante%20non%20selezionato.png);
        }
        
        #vynil.hovered
        {
            background-image: url(pulsante%20selezionato_cursore%20sopra.png);
        }
        
        #vynil.selected
        {
            background-image: url(pulsante%20selezionato_pennello.png);
        }
		
        #digital
        {
            width:86px;
            height:33px;
            cursor:pointer;
			background-image: url(pulsante%20non%20selezionato_02.png);
        }
        
        #digital.hovered
        {
            background-image: url(pulsante%20selezionato_cursore%20sopra02.png);
        }
        
        #digital.selected
        {
            background-image: url(pulsante%20selezionato_pennello_02.png);
        }		
    </style>
    <script type="text/javascript">
        $(function() {
            $("#vynil").hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            }).click(
                function() {
                    $("#digital").removeClass("selected");
                    $(this).addClass("selected");
                }
            );
        });
		
		$(function() {
		$('.classeDiv').hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            })
            .click(function() {
                    $('.selected').removeClass("selected");
                    $(this).addClass(".selected");
            });
        });
    </script>
</head>

<body>
    <div id="vynil" class="classeDiv">
        
    </div>
    
    <div id="digital" class="classeDiv">
        
    </div>
</body>

</html>

ma non và...

**Xinod** · 02-09-2011, 14:17

$(this).addClass(".selected");
togli il punto prima di selected

il mio $(function({...})) sostituisce i tuoi

ciao

Discussione: rollover jquery

Strumenti discussione

Ricerca discussione

Visualizza

rollover jquery

Re: rollover jquery

Permessi di invio