Unofficial WebSite X5
WebSite X5 versioni obsolete => WebSite X5 [v10] Evolution - Discussioni generali => Topic aperto da: Zambelletti - 17 Ottobre, 2013, 10:09:11
-
Buon giorno, vorrei realizzare un qualcosa tipo quello che vedete in questo link :
http://www.toyota.it/cars/new_cars/yaris/index.tmex?view=takealook&select=movies (http://www.toyota.it/cars/new_cars/yaris/index.tmex?view=takealook&select=movies)
Ovvero, dati "n" pulsanti, cliccando su di uno la macchina cambia colore (le macchine colorate ce l'ho).
Non so come si possa chiamare questa funzione.
Sapreste indicarmi se in rete c'è qualche esempio?
Grazie!
-
Buon giorno, mi sono arrangiato da solo, l'ho fatto con uno slideshow :
LINK (http://www.pdagrafica.com/rollover-bmw-r-906-1.html)
vorrei però aggiungere due varianti :
1) il quadratino colorato attivo, vorrei evidenziarlo con una cornice bianca.
2) Ovviamente non vorrei la transizione delle immagini.
3) Che il testo : arancione, rosso, etc; Mi comparisse sotto al quadratino e solo quando è attivo.
4) Vorrei ridurre lo spazio tra la riga azzurra e l'immagine, mentre vorrei aumentare lo spazio tra la riga azzurra e i quadratini colorati
Suppongo che bisogna intervenire sui file css e js
Potreste darmi qualche "spunto" sul come intervenire?
Grazie!
-
Allora per una parte sono riuscito a correggermi da solo.
Resta da sistemare solo questo :
2) Ovviamente non vorrei la transizione delle immagini.[/size]3) Che il testo : arancione, rosso, etc; Mi comparisse sotto al quadratino e solo quando è attivo.
Un aiutino?
-
Buon giorno, scusate.
Almeno per me è importante, ho fatto vari tentativi ma non ci riesco.
C'è qualcuno che può darmi un suggerimento per risolvere?
Grazie!
-
2) Ovviamente non vorrei la transizione delle immagini.
Sicuramente non ho capito bene ma se volevi ottenere un semplice "switch" tra immagini perchè implementare uno slide?
Non ho guardato se tra le opzioni esiste la "non transizione" ma con un semplice JS puoi ottenere, per esempio, questo:
http://lemonsong.altervista.org/test_js_colori/ (http://lemonsong.altervista.org/test_js_colori/) (è un vecchio esempio e va personalizzato/adattato)
3) Che il testo : arancione, rosso, etc; Mi comparisse sotto al quadratino e solo quando è attivo.
Questa non l'ho capita; quale testo, "Gamma Colori"?
-
Ciao Marco e grazie per essere intervenuto.
Sono ricorso ad uno slider, perchè da solo non sapevo che pesci pigliare, e pensa che ho fatto tutto da solo.
Avevo visto il tuo link, non l'ho preso in considerazione perchè pare che cambi il tema.
Eventualmente provo.
Per il discorso del testo, vorrei questo :
passando con il mouse su di un quadratino arancione, vorrei visualizzare il nome del colore sotto al quadratino attivo.
-
Prova a vedere se questo può andare: http://lemonsong.altervista.org/test_jq_colori/ (http://lemonsong.altervista.org/test_jq_colori/)
Nel sorgente trovi tutto.
Grazie stesil per l'aiuto.
-
E' esattamente quello che volevo.
Lo implemento e vi ringrazio in privato.
-
Non mi funziona. ::)
Ho anche provato in una pagina pulita, ma era addirittura peggio.
Ho fatto questo :
file js
Only registered users can see contents. Please click here to Register or Login.Richiamandolo in Head Only registered users can see contents. Please click here to Register or Login.come body Only registered users can see contents. Please click here to Register or Login.
come css
Only registered users can see contents. Please click here to Register or Login.
Ho caricato tutti i file immagini e il js nella cartella files.
Ecco il link (http://www.pdagrafica.com/switch-color.html)
Mi dareste un ulteriore aiuto?
Grazie anticipatamente.
-
non ti chiedo di farmi la famosa "pappa pronta" ma almeno una fonte da dove posso estrapolarne il codice, come tutti gli altri esperimenti che ho fatto da solo e completati con il vostro prezioso aiuto.
Se "spulci" meglio il sorgente e NON aggiungi il codice che genera già WS dovresti riuscire.
Vedo che a togliere i commenti dagli script sei veloce però ;)
-
Forse va meglio.
Guardando il codice con più attenzione (ieri erano le 02,00), c'erano due celle, quindi ho ritenuto opportuno fare due html.
Inoltre, ho capito, che per far si che funzioni, le immagini devono essere nominate con un certo criterio, quindi se il quadratino è rosso, la motocicletta non può essere rossa ma rosso.
Pare che manchi l'allineamento al centro.
Only registered users can see contents. Please click here to Register or Login.già c'è, quindi significa che avrò mancato qualcosa.
posso avere uno spunto ulteriore?
LINK (http://www.pdagrafica.com/switch-color.html)
(Vedi, a volte bastano dei piccoli imput e pian piano ci arriviamo)
-
(Vedi, a volte bastano dei piccoli imput e pian piano ci arriviamo)
Perchè, in quanti siete? :)
-
UNo, un fiorino!
LINK (https://www.youtube.com/watch?v=MFrWNaCreDs)
e per centrarlo? che posso fare?
-
:lol: (uno dei miei film preferiti)
Sembra che tu abbia inserito un </div> di troppo... scovalo e rimuovilo.
-
L'ho trovato, erano due per la verità.
A volte vedi, sono errori dovuti al copia-incolla, mi succede spesso di portarmi dietro dei codici, non cic sarei arrivato, perchè ero concentrato su altro, escludendo degli errori così stupidi.
Ce l'abbiamo fatta.
Ora non mi resta che fare le mie personalizzazioni.
A tal proposito, se volessi sovrapporre all'immagine della motocicletta, un box con fondo trasparente e testo (come ho fatto qui : LINK (http://www.pdagrafica.com/360-spin-vitra-ottoman-charles.html)) però che il testo sia diverso da slide a slide, come potrei modificareil codice?
Non so se è chiaro.
-
Sarà una roba del genere?
http://lemonsong.altervista.org/test_jq_colori/pagina-1.html (http://lemonsong.altervista.org/test_jq_colori/pagina-1.html)
Se sì, ho editato la pagina-1 a mano, non so se ci saranno degli errori o altro.
Non portarti dietro i codici, "spulcialo" bene il sorgente.
-
Si, è esattamente questo.
Provo a realizzarlo.
Nel frattempo mi è capitato un inconveniente.
Si sono sovrapposti i css del tag p.
Ovvero, ho inserito una cella html con tag p, e ora, lo switch, cliccando sui quadratini, prende l proprietà della cella, in particolare lo sfondo.
Dovrei modificare la p nel css, come lo posso modificare affinchè funzioni?
LINK (http://www.pdagrafica.com/switch-color.html)
p.s.
i quadratini, sono volutamente decentrati perchè ne debbo aggiungere altri.
-
Se ho capito bene, prova ad aggiungere la classe jspPane:
Only registered users can see contents. Please click here to Register or Login.
Ora vado via in moto...
(http://images1.wikia.nocookie.net/__cb20110122213441/annoyingorange/images/e/e2/Grandpa_lemon_hoops_of_freedom.jpg)
8) :P
-
Only registered users can see contents. Please click here to Register or Login.
E' vero, me lo avevi già suggerito.
Dunque, credo di aver fatto tutto, l'unica cosa è che quando scrivo nel css : font-family: Segoe UI Semilight;
il testo non è più centrato rispetto al margine superiore e inferiore.
LINK (http://www.pdagrafica.com/switch-color.html)
-
Speriamo di concludere 'sto argomento:
- l'immagine di default al caricamento della pagina non corrisponde al pulsante "premuto" ed inoltre non appare il box con il testo: rivedi il codice
- rivedi il CSS font-face perchè ancora non ci siamo: con FF non si applica
- puoi impostare padding e/o l'altezza senza necessariamente iniziare il paragrafo con un "a capo" (<br />)
-
Eccomi, credevo di aver sistemato tutto, fortunatamente hai supervisionato.
Grazie!
Ora pare che funzioni.
Eventualmente mi dici.
Quello che non capisco è il perchè debbo utilizzare un file woff su mozilla quando supporta il tff.
Bah!
-
Ora sembra a posto.
Google Fonts pare che usi solo quello.
Prova a vedere/aggiornare questa pagina con tutti i browser che hai:
http://lemonsong.altervista.org/test_jq_colori/pagina-1.html (http://lemonsong.altervista.org/test_jq_colori/pagina-1.html)
Qui trovi il CSS remoto usato:
http://fonts.googleapis.com/css?family=Rationale (http://fonts.googleapis.com/css?family=Rationale)
Woff su Wikipedia:
http://it.wikipedia.org/wiki/Web_Open_Font_Format (http://it.wikipedia.org/wiki/Web_Open_Font_Format)
-
Ho creato una nuova pagina
LINK (http://www.pdagrafica.com/switch-color-cucina-01.html)
On line non vedo le immagini, e poi ho reiterato in errore che non ricordo come avevo risolto, ovvero all'apertura della pagina, il colore del quadratino attivo è diverso da quella della prima immagine.
un piccolo input?
Grazie!
-
Hai sbagliato i percorsi: la cartella in cui hai messo le immagini inizia con una lettera maiuscola. L'immagine, invece, con la minuscola.
http://www.pdagrafica.com/images/switch-color/Cucina-01/cucina-finitura-laccato-lucido-bianco.jpg
-
Grazie stesil, solite distrazioni.
mi dispiace. :-[
Per vedere attivo il pulsante bianco, all'apertura della pagina, piuttosto che quello arancione?
Lo avevo già risolto, ma non ci arrivo più.
Grazie!
-
Basta sostituire la parola arancione con bianco nel CSS della pagina: www.pdagrafica.com/pcss/switch-color-cucina-01.css
-
Proprio non mi ricordo come lo avevo risolto.
Ad ogni modo, ho fatto come mi hai detto, e se faccio la preview, il pulsante attivo è quello bianco.
ok.
Però, se accedo a quella pagina da un link , off line oppure on line, il pulsante attivo è quello arancione.
può essere una questione di memoria chache?
-
Non vedo gli aggiornamenti online del tuo esempio.
Qui ti linko di nuovo l'esempio che ti avevo preparato: http://lemonsong.altervista.org/test_jq_colori/pagina-1.html (http://lemonsong.altervista.org/test_jq_colori/pagina-1.html)
-
Risolto, come la vosta scorsa.
Riguardando il tuo esempio, mi sono anche ricordato quello che avevo fatto.
Ho cambiato arancione con bianco, direttamente dal css di wsx5.
Poi per scrupolo ho ricontrollato il pcss/css, e ti assicuro che avevo sostituito arancione con bianco.
L'ho riaperto, e non ho trovato le modifiche.
Grazie!
-
Ho cambiato arancione con bianco, direttamente dal css di wsx5.
E' questo l'unico modo per mantenere le modifiche ai CSS della pagina (oggetto HTML e Widgets - Esperto).
Prego.
-
Buon giorno, scusate se ritorno sull'argomento, vorrei aggiungere una variazione : cliccando o avvicinando il mouse all'icona, c'è la possibilità di vederla in grande.
Facciamo un esempio : il mio soggetto è una sedia con 5 finiture diverse.
Avvicinando il mouse ad una delle 5 finiture disponibili, mi compare un ingrandimento del campione di finitura, mentre cliccando invece sull'icona visualizzo nell'apposito riquadro l'immagine completa come ho fatto fin ora.
Potete aiutarmi?
Grazie!
-
Se ti riferisci sempre a questo esempio (http://lemonsong.altervista.org/test_jq_colori/) potresti usare il codice (tag a) del tooltip che genera WS, esempio:
<a id="pulsante_colore" href="javascript:colore('colore')" onmouseover="x5engine.imTip.Show(this, { text: '&lt;img src="cartella/immagine.ext" alt=""/&gt;&lt;div&gt;&lt;/div&gt;', width: 100});" class="imAbbr imCssLink">
<img src="cartella/immagine.ext" width="50" height="50" alt="" />
</a>
Ovviamente devi sostituirlo con il "vecchio" tag a.
Le personalizzazioni del tooltip le puoi fare da programma (Passo 4 - Stili e Modelli).
Provato in locale:
[attachimg=1]
-
Si, va bene.........hai intuito giusto, pensavo ad una cosa più complessa, vedi allegato.
Ma non ho capito dove scrivere il codice che mi hai postato, ovvero ho capito che debbo modificare il codice che genera wsx5, però questo mi comporta che mi fa questo effetto in tutte le pagine......
ho interpretato male il tuo suggrimento?
Grazie!
-
Hai provato prima di postare?
E' tutto scritto sopra, il codice è già "pronto" e ti ho scritto pure dove devi metterlo:
Ovviamente devi sostituirlo con il "vecchio" tag a.
[...] però questo mi comporta che mi fa questo effetto in tutte le pagine......
Questa non l'ho capita...
Visto le tue aggiunte alla richiesta iniziale, quel codice andrebbe ripensato da zero e magari sfruttare di più il programma.
-
Intanto grazie e mi sta bene come proponi, non ho provato il codice......ti ho scritto solo per assicurarmi che parlavamo della stessa cosa.
Mi faccio sentire Lunedì se ci sono difficoltà ma..non credo.
Interessante anche la questione di riscrivere il codice da zero......ma non saprei da dove partire.
-
Mi faccio sentire Lunedì se ci sono difficoltà ma..non credo.
Non si sa mai e visto che l'ho provato, ti linko l'esempio aggiornato:
http://lemonsong.altervista.org/test_jq_colori/pagina-2.html (http://lemonsong.altervista.org/test_jq_colori/pagina-2.html)
-
non c'è l'esempio aggiornato.
-
Se lo dici tu...
-
Vedo quello che visualizzi in allegato alla pagina 2, nelle altre pagine comunque non c'è il tool tip :)
Ti giuro!
-
E' ovvio!
Chi te l'ha detto che l'avrei messo in tutte le pagine?
-
non c'è in nessuna pagina, la pagina 2 è vuota.
-
Mhmmm... svuota la cache! :)
-
Adesso la vedo :)
Scusate non ci avevo pensato.
-
Eccomi qua....ho provato e mi funziona.
Bravo! Complimenti e grazie!
L'unica cosa...non so se però c'entra.....ho un immagine di un carrello con effetto al passaggio del mouse, dopo che ho inserito il tooltip...non mi fa più l'effetto al passaggio del mouse.
Secondo te..c'entra?
Ecco il link (http://www.emporiovenezia.it/caos-10.html)
P.s.
Vorrei provare ad aggiungere un titolo all'interno del tolltip (ovviamente lo potrei fare incollando il testo su di un immagine, ma mi incuriosisce farlo con linguaggi di programmazione).
Provo a farlo da solo....magari se non riesco provo a chiederti.
Nel frattempo....come potrei fare per far aprire una finestra popup cliccando sull'immagine del prodotto, al fine di far visualizzare la stessa foto ma con dimensioni maggiori.
Immagino che bisogna intervenire a livello funzione java script.....forse ci può aiutare Stesil?
-
L'unica cosa...non so se però c'entra.....ho un immagine di un carrello con effetto al passaggio del mouse, dopo che ho inserito il tooltip...non mi fa più l'effetto al passaggio del mouse.
Secondo te..c'entra?
Non c'entra e mi piacerebbe sapere se ti ha mai funzionato veramente.
Comunque, andare a cercare script del 2002 o giù di lì...
Puoi usare qualcosa del genere:
Only registered users can see contents. Please click here to Register or Login.
-
Puoi usare qualcosa del genere:
Intanto grazie, ci provo però....ti assicuro che ha funzionato.
Provo a ribadire un mio pensiero....e non è rivolto a te.
Personalmente, ma credo anche tutti gli altri utenti, prima di postare sul forum....ci sbattono la testa, si cerca in internet.
Il problema però....è questo che in internet c'è tutto e l'utente fa un po' fatica a distinguere le fonti attendibili da quelle meno attendibili, ma per fortuna ci siete voi : Marco, Silvana, Sergio etc; che siete sempre presenti e se potete volentieri date una mano.
Grazie per tutto!
p.s.
Only registered users can see contents. Please click here to Register or Login.
ma....non mi ha funzionato.
Per aprire una finestra pop up che mostra l'immagine ingrandita....non ho provato...se avete qualche fonte da cui potrei attingere ci provo volentieri.
[size=78%] [/size][/size][/font]
-
però....ti assicuro che ha funzionato.
Probabilmente ti ha funzionato il primo che hai inserito/provato.
Dal secondo in poi hai commesso gli errori.
Hai assegnato all'attributo name, di tutte le immagini, lo stesso valore:
<a href="http://www.yyyyyyyyyyy.com"
onMouseOver="cambia(img_c2,'images/e-shop/e-shop-h.png')"
onMouseOut="cambia(img_c2,'images/e-shop/e-shop.png')">
<img border="0" name="img_c1" src="http://www.xxxxxxxxxxxxxx.it/images/e-shop/e-shop.png">
</a>
Comunque, come già detto, usa un altro sistema/script.
Per il testo nel tolltip...ovviamente ci ho provato...
Non puoi "inventarti" il codice.
Provo a ribadire: hai tutto lì a disposizione, basta inserire quello che ti serve con gli strumenti di WS e copiare/studiare il codice generato:
<a id="pulsante_colore" href="javascript:colore('colore')" onmouseover="x5engine.imTip.Show(this, { text: '&lt;div&gt;testo sopra immagine&lt;/div&gt;&lt;img src="cartella/immagine.ext" alt=""/&gt;', width: 100});" class="imAbbr imCssLink">
<img src="cartella/immagine.ext" width="50" height="50" alt="" />
</a>
<a id="pulsante_colore" href="javascript:colore('colore')" onmouseover="x5engine.imTip.Show(this, { text: '&lt;img src="cartella/immagine.ext" alt=""/&gt;&lt;div&gt;testo sotto immagine&lt;/div&gt;', width: 100});" class="imAbbr imCssLink">
<img src="cartella/immagine.ext" width="50" height="50" alt="" />
</a>
Stessa cosa la puoi fare con la finestra popup.
-
Avevo fatto in questo modo : pagina vuota di wsx5, ho inserito un immagine, gli ho dato un link e in questo ho scelto il tooltip e ho scritto un testo.
Sono andato on line e ho visto che il testo che avevo scritto me lo ha riportato subito dopo text : e...
così ho fatto nel mio esempio.
Invece tu il testo lo metti dopo : text: '&lt;div&gt;
[/size][/color]
[/size]Provo e ti dico, poi vediamo se riesco a fare la finestra pop up.....magari provo anchea spiegare più chiaramente cosa vorrei fare, perchè la situaz<ione si è complicata, magari riesco a risolvere anche diversamente.....ho un idea! Provo e ti dico.[/color]
[/size][/color]
[/size]Intanto grazie ancora.[/color]
-
Non credo che WS possa aver messo il testo fuori dagli apici:
[...]{ text:testo prova '&lt;img src="cartella/immagine.ext[...]
[attachimg=1]
Invece tu il testo lo metti dopo :
Non io, WS!
Comunque, adesso hai tutto quello che ti serve, devi solo cercare di non commettere più errori... buon lavoro!
-
Ciao Marco, e buon giorno a tutti.
Riguardo il discorso di far comparire un testo sul tooltip, ho utilizzato il tuo codice, ma al di la del fatto che mi compare : <div> testo sopra......in realtà avrei voluto che il testo mi comparisse "sovrapponendosi all'immagine, non sotto o sopra, ma....mi sono spiegato male.
Per l'effetto moushover , ho utilizzato il tuo script, scritto in questo modo :
Only registered users can see contents. Please click here to Register or Login.
Funziona, solo non so perchè...ho l'impressione che sia scritto male href.
Riguardo invece il discorso di aprire uno show box cliccando sull'immagine.......
il mio desiderio era quello di avere due div (non era certamente la prima volta che lo faccio)....un div contenente il link ad un sito (l'e-commerce) e l'altro div (il segno ) con link ad uno showbox.
Ho scritto questo codice :
Only registered users can see contents. Please click here to Register or Login.
Il risultato era che l'ìcona del non si vedeva, come se non fosse stata caricata in FTP, mentre cliccandoci....si apriva quasi lo showgallery, ma in realtà non si apriva.
alla fine ho optato temporaneamente per la soluzione che vedi on line : LINK (http://www.emporiovenezia.it/beba.html)
Però se riuscissi a comunicarmi dov'è l'ingippo....magari ci riprovo.....se puoi e se vuoi.
Grazie!
-
Mi intrometto...
Funziona, solo non so perchè...ho l'impressione che sia scritto male href.
sì, impressione corretta.
Only registered users can see contents. Please click here to Register or Login.
-
Ciao Silvana, volevo aggiungerci un effetto di dissolvenza, fortunatamente in internet ho trovato la stessa sintassi e allora ho aggiunto : alt="fade_me",
[/size]
[/size]ma non mi funziona.
[/size]
[/size]Perchè?
[/size]
[/size]Questo è quello che ho trovato :
[/size]
[/size]<img src="images/1.jpg" onmouseover="this.src='images/2.jpg'" onmouseout="this.src='images/1.jpg'" alt="fade_me" />ovviamente ci ho aggiunto anche il div e i css
-
In attesa che Silvana intervenga, ti consiglio di "ripassarti" l'attributo alt: http://www.w3schools.com/tags/att_img_alt.asp (http://www.w3schools.com/tags/att_img_alt.asp)
Da solo non serve a fare quello che vuoi tu.
Puoi usare i CSS3 come l'esempio jsfiddle di QUESTO (http://stackoverflow.com/questions/17901683/onmouseover-and-onmouseout-fade-effect) post, (credo che sia quello che ti ha "ingannato").
Potresti usare JS/jQuery ma da solo l'attributo alt serve ad altro.
-
E' il post che mi ha tratto in inganno.
Ho messo questo in html :
Only registered users can see contents. Please click here to Register or Login.
e questo come css
Only registered users can see contents. Please click here to Register or Login.
Ma la dissolvenza non c'èra
-
Per una maggiore compatibilità tra i vari browser devi usare i prefissi (pag. 48 del libro che non hai mai letto).
Prima di vendere... STUDIA!