WebSite X5Help Center

 
Francesco Tedeschi
Francesco Tedeschi
User

Immagine richiamata con HTML responsive  it

Autore: Francesco Tedeschi
Visite 1144, Followers 5, Condiviso 0  

Buonasera,

questa immagine

inserita sul sito http://www.provadistinti.altervista.org/provafullscreen/
richiamata dal tag A:
<a id="F11" href="javascript:void(0)" style="position:fixed;top:50%;margin-top:-205px;left:50%;margin-left:-205px" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen"><img src="http://www.provadistinti.altervista.org/1/images/msg.png" width="100%" /></a>

è possibile renderla responsive ??
Quando visualizzo il sito web da smartphone, l'immagine mi compare tagliata, so che potrei magari farla più piccola, ma chiedo se c'è un comando che la renda responsive... grazie

Postato il
38 RISPOSTE - 6 UTILI - 1 CORRETTO
Fabio C.
Fabio C.
User

Prova ad inserire anche l'altezza dell'immagine height="409" ho provato sul mio sito prova e funziona solo che devi rivedere le posizioni, per ll mio sito sono queste:

<a id="F11" href="javascript:void(0)" style="position:fixed;top:50%;margin-top:-200px;left:50%;margin-left:-180px" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen"><img src="http://www.provadistinti.altervista.org/1/images/msg.png" width="100%" height="409"/></a>

Leggi di più
Postato il da Fabio C.
Francesco Tedeschi
Francesco Tedeschi
User
Autore

Quindi

<a id="F11" href="javascript:void(0)" style="position:fixed;top:50%;margin-top:-200px;left:50%;margin-left:-180px" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen"><img src="http://www.provadistinti.altervista.org/1/images/msg.png" max-width="100%"height="auto"/></a>

?

è corretto ?

Leggi di più
Postato il da Francesco Tedeschi
Gabriele D.
Gabriele D.
User

Però se usi valori percentuali l'immagine scala nel momento in cui la sua width diventa maggiore della width della finestra e di conseguenza ti occuperà tutta la larghezza della finestra. Se vuoi un controllo migliore sulle sue dimensioni, secondo la mia opinione, è meglio assegnare le dimensioni volute per ogni breakpoint usando le @media queries.

Leggi di più
Postato il da Gabriele D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
... ... ok, provato e va benissimo. ... ...

... se il LINK è sempre quello del primo post, non mi pare né responsive e né elastico...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Gabriele D.
Gabriele D.
User
 ‪ KolAsim ‪ ‪
Francesco Tedeschi ... ... ok, provato e va benissimo. ... ... ... se il LINK è sempre quello del primo post, non mi pare né responsive e né elastico... .

Oltretutto non si può obbligare l'utente a navigare per forza in fullscreen. Il popup di richiesta dovrebbe anche poter essere chiuso!

Leggi di più
Postato il da Gabriele D.
Francesco Tedeschi
Francesco Tedeschi
User
Autore

Ciao Kolasim, il link è sempre quello di inizio topic, ho solo cambiato l'immagine.

Siccome da smartphone si adattava e fa PC anche, credevo che andava bene il codice impostato così come ha suggerito Esse Di per rendere responsive l'immagine.

@Gabriele, non è un vero e proprio popup, è un immagine e non credo possa essere chiusa perché ho inserito del codice esterno x richiamarla

Leggi di più
Postato il da Francesco Tedeschi
Esse Di
Esse Di
User
Francesco Tedeschi
Ciao Kolasim, il link è sempre quello di inizio topic, ho solo cambiato l'immagine. Siccome da smartphone si adattava e fa PC anche, credevo che andava bene il codice impostato così come ha suggerito Esse Di per rendere responsive l'immagine. @Gabriele, non è un vero e proprio popup, è un immagine e non credo possa essere chiusa perché ho inserito del codice esterno x richiamarla

Hai inserito un'immagine di 1600x1200 pixel, dimensioni che vanno bene per qualsiasi risoluzione.

Che cosa c'entra il responsive?

E' sufficiente il codice di Kolasim da te menzionato nel post di apertura, adeguando, ovviamente, i margini alle nuove dimensioni

In questa post dell'altro tuo topic

https://helpcenter.websitex5.com/it/post/229472#comment22

ti è stato chiaramente indicato che i margini top e left devono essere la metà delle dimensioni dell'immagine

Leggi di più
Postato il da Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
Ciao Kolasim, il link è sempre quello di inizio topic, ho solo cambiato l'immagine. ... ... 

... mi riferivo al responsive in Oggetto della Domanda, in quanto l'immagine la vedo di misure fisse,  ma per quello per me sta anche bene così...wink

...!... se invece è vero che ti interessava una certa elasticità reattiva e/o adattamento alla finestra, fammelo sapere, che cercherò di  rispolverare una delle mie prime invenzioni...!...
...!... visto che è stata nominata la (X) per la navigazione ordinaria, penso che si potrebbe usare il Messaggio Pubblicitario, o lo ShowBox, o di sicuro il mio storico metodo con il DIV_CUTOM...!...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

quell'immagine che vedi viene richiamata  dal "tag A" (questione dei gg scorsi per simulare F11) 
Se si può ottenere la simulazione F11 all' interno di un messaggio pubblicitario, a me farebbe molto comodo perchè il msg pubblicirtario si può chiudere con la X.....

Leggi di più
Postato il da Francesco Tedeschi
Francesco Tedeschi
Francesco Tedeschi
User
Autore

e oltretutto, il messaggio pubblicitario è automaticamente responsive....

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
e oltretutto, il messaggio pubblicitario è automaticamente responsive....

... pubblica l'esempio con il messaggio pubblicitario, e poi vedremo se si può fare qualcosa... .. . .

... intanto per la (X) ...sulla pagina attuale prova questo mio codice estratto dal mio div_custom:

<script> $( document ).ready(function() {
divK='<div id="K" style="position:fixed;widthX:100px;heightX:100px;top:50%;margin-top:-130px;left:50%;margin-left:100px;backgroundX:yellow;z-index:100000000"><a href="javascript:void(0)" onclick="$(\'#F11\').hide(); $(\'#K\').hide(); " > <img src="https://img.icons8.com/cotton/2x/cancel.png" width="50" alt="No! Navigazione Normale!" title=" No!\nNavigazione\n Normale!" > </a></div>';
$("body").append(divK);}); </script>

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

funziona ed è bello Kolasim, c'è un piccolo problema, se si clicca sul tasto CLICCA QUI, rimane solo la X.

Il messaggio pubblicitario l'ho inserito wink

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
funziona ed è bello Kolasim, c'è un piccolo problema, se si clicca sul tasto CLICCA QUI, rimane solo la X. ... ... 
... purtroppo non avendo il programma devo vedere l'esempio reale per potermi regolare...foot-in-mouth

... intanto, per quel che hai segnalato, ...in Firefox o in Chrome aziona Ctrl+U e vedrai il codice sorgente...

... al rigo 264, là dove vedi:
function full_screenK(){$('#F11').hide();}

... sostituisci con:
function full_screenK(){$('#F11').hide(); $('#K').hide();}


... al rigo 271, là dove vedi:
$('#F11').show();  }}

... sostituisci con:
$('#F11').show(); $('#K').show();  }}

.
... applica queste modifiche al tuo codice...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
... ...  Il messaggio pubblicitario l'ho inserito

... al posto delle istruzioni precedenti, con il solo messaggio pubblicitario; ... modifiche:
1) - elimina il TAG  <A> ;
2) - il precedente rigo 264, diventa così:
function full_screenK(){$("#splashbox-advcorner").hide();}

3) - il precedente 271, diventa così::
$("#splashbox-advcorner").show();  }}

4) - aggiungi questo SCRIPT:
<script>
$( document ).ready(function() {
divK='<a href="javascript:void(0)" onclick="go_full_screen();full_screenK();chiudi();" > <img width="100%" src="http://www.provadistinti.altervista.org/provafullscreen/images/MSGPUBB_0a68dmb6.png" alt="passa in FullScreen" title="passa in FullScreen" > </a>';
$("#splashbox-advcorner > div:nth-child(2)").html(divK);});
</script>


.
bye

...!... ==============EDIT>>>>>>>>>>

... ho svincolato lo SCRIPT del .4) dalla immagine, così puoi usare sempre quella del programma, e quindi il codice SCRIPT corretto diventa questo:

<script>
$( document ).ready(function() {
divK='<a style="display:block" href="javascript:void(0)" onClick="go_full_screen();full_screenK()" alt="FullScreen" title="FullScreen" > <div id="k" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:white;opacity:0.0"></div></a>';
$(".imClose").before(divK);;

</script>

.

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... visto che ho visto nella Guida che al messaggio pubblicitario si può assegnare il collegamento, allora diventerebbe ancora più semplice...

... selezionare il collegamento con l'opzione File o URL  | File su Internet, digitando o meglio, incollando quanto in grassetto:

void(0)" onclick="go_full_screen(); full_screenK();

... esattamente così come lo si vede, con gli apici (") asimmetrici...

... pertanto rispetto al codice sorgente che vedo attualmente le modifiche da fare sarebbero:

1) - eliminare il TAG  <A> ;

2) - nello SCRIPT della funzione function go_full_screen() ...sostituire la riga nr.264 con questa stringa:

function full_screenK(){$("#splashbox-advcorner").hide();}

3) - nella stessa funzione cui precedente .2) ...sostituire la riga nr.271 con questa stringa:

$("#splashbox-advcorner").show(); }}

...

... in teoria salvo dimenticanze/errori il tutto potrebbe funzionare; da verificare in rete...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

Perfetto Kolasim, appena sono a casa provo e ti faccio sapere.

Leggi di più
Postato il da Francesco Tedeschi
Francesco Tedeschi
Francesco Tedeschi
User
Autore

Ciao Kolasim, allora, http://www.provadistinti.altervista.org/provafullscreen

‪ KolAsim ‪ ‪
... selezionare il collegamento con l'opzione File o URL  | File su Internet, digitando o meglio, incollando quanto in grassetto: void(0)" onclick="go_full_screen(); full_screenK();

questo fatto, ho eliminato anche il tag A.

 ‪ KolAsim ‪ ‪
2) - nello SCRIPT della funzione function go_full_screen() ...sostituire la riga nr.264 con questa stringa: function full_screenK(){$("#splashbox-advcorner").hide();} 3) - nella stessa funzione cui precedente .2) ...sostituire la riga nr.271 con questa stringa: $("#splashbox-advcorner").show(); }}

queste 2 variazioni le ho fatte attraverso il programma, non so come modificare il codice attraverso mozzilla, ho visto su mozzilla la riga 264 o 271 ma nn ho trovato lo script a cui ti riferivi e tra l'altro anche se le trovavo non so come apportare modifiche al codice

comunque, verifica che le sostituzioni ai righi 264 e 271 siano state fatte bene.... 

Ho esportato il sito su internet..... ma c'è un errore, a inizio di questo topic ho reinserito il link al sito.

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
... ...  Ho esportato il sito su internet..... ma c'è un errore, a inizio di questo topic ho reinserito il link al sito.

1) ... sostituisci lo SCRIPT con quello in allegato... ↓↓↓ ...  (avvisa per controllare)

2) ... assegna al messaggio pubblicitario  il collegameto nel modo detto prima:

void(0)" onclick="go_full_screen(); full_screenK();

.

[OT] ... per mia curiosità, fammi sapere se da programma è possibile inserire messaggi pubblicitari diversi in altre pagine...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

ok, lo script l'ho sostituito,
ho assegnato al messaggio pubblicitario il collegamento che mi hai dato.
Ho messo tutto in rete
Quando si clicca sul msg pubblicitario, c'è ancora un errore, il collegamento assegnato al msg pubblicitario da problemi...

Da programma posso scegliere in quali pagine il messaggio pubblicitario deve essere mostrato, al momento è visibile solo in home page ma potrei renderlo visibile (ad esempio) solo nella pagina contatti oppure in tutte la pagine.

Non è possibile mostrare messaggi diversi in altre pagine.

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
... ...  Non è possibile mostrare messaggi diversi in altre pagine.

... grazie, ...è proprio questo che hai detto che mi interessava...wink

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

laughing e quindi ?

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Francesco Tedeschi
... ...  Quando si clicca sul msg pubblicitario, c'è ancora un errore, il collegamento assegnato al msg pubblicitario da problemi... ... ... 

... infatti, ho provato adesso, ...mmm...undecided...

... hai uno STAMP di come si presenta la finestra per il collegamento, in modo da potermi regolare...?...

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

...!...surprised scusmi, ... colpa mia!...embarassed  ...mi sono mangiato una stringa del codice...undecided

... vado a ricontrollare, e ti dirò...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... il video è NERO, (forse codec non adatto)  ... ma con l'audio forse ho capito lo stesso...

... tra poco ti farò sapere; ...forse ci siamo...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

OK

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... sì, ...vedendo il video, pare che hai fatto tutto correttamente...+

.. purtroppo però non riesco a capire perchè da programma non prenda il collegamento con evento regolare; ...senza del programma non posso approfondire...

... allora tagliamo la testa al toro, ...facciamo un passo indietro e torniamo al div_customK...

... quindi:

.1) .. elimina il collegamento che hai messo al messaggio pubblicitario;

2) ... sostituisci tutto lo SCRIPT con quello in ALLEGATO, (sperando ci non aver tralasciato qualcosa)!...

... fammi sapere quando avrai fatto...

...

...

... poi, se per caso vuoi anche applicare un semplice effetto al passaggio del mouse, allora prima della chiusura di /HEAD incolla questo codice:

<style> #k:hover {opacity:0.2 !important} </style>

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

ho fatto. Sembra che non succeda nulla al clic sul msg pubblicitario.... ma devo reinserire il tag A?

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... no!.. il tag A è già nel div_custom dinamico...

... purtroppo nella mia tastiera manca la "a" che devo metterla con copia/incolla...foot-in-mouth! ... >>  opcity  >> opacity

<style> #k:hover {opacity:0.2 !important} </style>

........................

... per il resto, potrebbe dipendere dal fatto che il codice si attivi prima della apparizione del messaggio pubblicitario, rimanendo inerte...

... nello SCRIPT qui in allegato ho aggiunto un ritardo di 3 secondi (3000 m), quindi sostituisci tutto il precedente codice con questo... prova ed avvisa ... ...↓↓↓...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... ottimo! ... wink

... correggi in style  opacity  con la "a"  ...che adesso manca...

... eventualmente aumenta il tempo di un secondo,  da > 3000 a > 4000

... per e-mail tieni presente che ho un connessione difficoltosa, ed il PC obsoleto...

>> kolasim(At)hotmail.com  ... (At) = @

.

... adesso chiudo, ed eventualmente a domani, ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

...cool... visto che le hai provate tutte, ti chiederei di fare questa ultima prova con lo SCRIPT qui allegato "fullscreenK2.txt ", ed assegnando al messaggio pubblicitario  questo collegamento, (diverso dal precedente):

javascript:void(0)" onclick="go_full_screen(); full_screenK();

... oppure e/o anche, provare con questo:

#" onclick="go_full_screen(); full_screenK();

... se funzionasse, sarebbe da preferire al metodo con div_custom ritardato di 3 sec. ...

... grazie per la prova, e se puoi fai  sapere ... ciao...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Francesco Tedeschi
Francesco Tedeschi
User
Autore

Allora Kolasim,
ho inserito l'ultimo script 

ho assegnato prima i il collegamento al messaggio pubblicitario, entrambi i collegamenti sembrano non funzionare, al clic non succede nulla.
Al momento è presente questo collegamento

#" onclick="go_full_screen(); full_screenK();

scrivimi per ulteriori prove

Leggi di più
Postato il da Francesco Tedeschi
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... grazie per il test; ...hai fatto correttamente, ma il risultato non è quello previsto, mi dispiace molto...foot-in-mouth

... torna pure alla precedente soluzione...

... quando avrò nuovamente il programma vedrò di ricordarmi di questo Topic, e nel caso ti avviserò...

... i tuoi test mi sono stati utilissimi...

... ci rivedremo nel caso in altri Topic...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪