CSS sprite con DW AIUTOOO

Di: blu116 | 26/09/2020 17:11:53
In dreamweaver ho realizzato una pagina con css, nella parte sotto ci sono 5 DIV in fila, ognuno di questi contiene una immagine in background
"background-image" ed  posizionata esattamente con "background-position".
A questo punto la domanda :
in dreamweaver cs3 come posso applicare a questo DIV chiamato #div_pinco uno stato :hover, al quale sono state applicate le coordinate che scambiano l'immagine del rollover???
Vi prego di non dirmi "basta applicare una classe al div" perch questo lo so giˆ,
il problema  come tecnicamente in dreamweaver si deve fare passo dopo passo..
ringrazio e offro da bere a chi mi aiuta, sono 4 giorni che mi spacco la testa su questa cosa
non ridete grazie

Risposte



Con Dreamweaver l'effetto rollover sulle immagini puoi ottenerlo in diversi modi, in genere con l'ausilio di javascript, ne abbiamo già parlato su questo forum... con i div è necessario usare le regole di stile:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rollover sui Div</title>
<style type="text/css">
<!--
#div_img {
background-image: url(immagine.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 40px;
width: 40px;
display: block;
}
#div_img:hover {
background-image: url(immagine_hover.jpg);
background-repeat: no-repeat;
background-position: center center;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
-->
</style>
</head>
<body>
<a href="#"><div id="div_img"></div></a>
</body>
</html>

Di: Gian Paolo | 26/09/2020 17:11:53


Ti ringrazio, ma il problema  fare questo utilizzando DW, quindi cosa devo fare? Forse devo selezionare il div e aggiugere una classe? Il problema  questo, DW pu˜ fare questo seguendo alcune indicazioni che penso ci siano sul manuale, anche se l'ho guardato ma tratta l'argomento genericamente, mentre vorrei capire con gli strumenti del software come fare, quali finestre aprire...

Di: blu116 | 26/09/2020 17:12:53


Guarda, purtroppo non è sempre possibile usare i comandi di Dreamweaver. Oltretutto la versione CS3, ha qualche funzionalità in più con gli Spry, ma non si puo' sempre correre all'installazione dell'ultima versione... Gli sviluppatori esperti riescono ad ottenere gli stessi effetti, attraverso lo studio e l'esperienza.
Tuttavia, in rete, esistono dei siti specializzati che spiegano il funzionamento di questi nuovi elementi, es:http://www.dreamweaverresources.com/spry-widgets/index.html.
C'è da aggiungere inoltre che le case costruttrici di software, per questioni di interessi economici, lanciano programmi molto spesso discutibili. Personalmente ritengo che il programma DW si ferma alla versione 8, quando la proprietà apparteneva alla Macromedia... secondo il mio parere, in alcune cose il nuovo programma non è per niente migliore delle versioni precedenti, soprattutto nella parte avanzata; gli script Server-Side,
sono stati modificati in maniera tale da non rispettare la programmazione classica.

Di: Gian Paolo | 26/09/2020 17:12:53


grazie sei stato molto gentile. Io non ho molte conoscenze sull'argomento ma nel pannello degli stili css quando vuoi fare una nuova regola CSS hai la possibilitˆ di utilizzare tre tipi di selettori, Classe, Tag e Avanzati ( e in questo troviamo le pseudo classi) proprio quelle che ci permettono di applicare :hover, :visited :link e :active....quindi il problema  solo qui, io ho provato ma ti crea una pseudo classe nuova, in questo punto come fai ad applicarla come hai fatto tu con copiaincolla????
Poi sono pienamente d'accordo con te, anche se non capisco bene quando dici della parte "Server-Side"...

Di: blu116 | 26/09/2020 17:13:53


Capisco perfettamente la necessità di usare gli strumenti ed è giusto farlo... dopo qualche tempo però le funzionalità si stampano nella mente che non senti più il bisogno di progettare in quella modalità... capita che ti fanno perdere tempo... certamente non si può affatto pretenderlo da chi sta iniziando. Tuttavia è bene che i fogli di stile si conoscano a fondo. La seguente guida sembra molto interessante http://editor.html.it/guide/lezione/3064/creare-classi/
Detto in modo molto stringato, per codice server-side s'intende la programmazione asp, php ecc che ti consente di ottenere automatismi dalle pagine web.

Di: Gian Paolo | 26/09/2020 17:13:53


risolto il problema, come dicevo sapevo bene la procedura, ma cercavo di fare il tutto usando gli strumenti di DW. Panso comunque che ci sia un "buco" nel programma. Se devo dare un :hover a un div, basta andare nel foglio stile, selezionare il div con tutte le sue proprietˆ, fare un accapo e incollare tutto, e assegnare a:hover dopo il nome del div, quindi inserire il background immage con il posizionamento....in DW devi selezionare il div, cliccare "nuova regola css" si apre la finestra e selezionare "avanzati" e qui sta il buco, perche vedi s“ tutti i div che hai a disposizione, poi con il men a tendina scegli la "pseudoclasse" tipo :hover, ma invece di aggiungersi al div al quale vuoi assegnare :hover, spariscono i #div e appare solo la pseudoclasse che hai scelto...a questo punto fai il contrario batti :hover di fronte al div che ti serve, ed ecco risolto il problema...non so se sono stato chiaro..

Di: blu116 | 26/09/2020 17:13:53