Cambio di contrasto facile per Regolamento 882 
Autor: Alberto B.
Besucht 1002,
Followers 4,
Geteilt 0
In riferimento al decreto legislativo sull'accessibilità dei servizi, ho notato un'idea interessante sul Marketplace qui.
Qualcuno sa come si può swappare facilmente di contrasto? Come si può intervenire anche con poco codice aggiuntivo ?
Gepostet am
In riferimento al decreto legislativo sull'accessibilità trovi in rete servizi anche gratuiti che ti permettono di adempiere alla normativa. Detto questo, mi sembra di aver letto che ci sono alcune eccezioni ad esempio le microimprese (cioè le piccole imprese con meno di 10 dipendenti).
Autor
Si, grazie Giancarlo conosco la norma, la mia era una domanda tecnica volevo ripetere l'effetto del sito che ho messo nel link, quello black & White
Purtroppo nessun "effetto speciale" lì ci sono due home page differenti, una chiara e una scura
Ciao alberto prova a mettere in un oggetto HTML il codice seguente:
<style>
/* Stile iniziale della pagina */
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Pulsante per cambiare i colori */
.toggle-button {
margin: 20px auto; /* Centra il pulsante orizzontalmente */
display: block; /* Rende il pulsante un elemento di blocco */
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}
.toggle-button:hover {
background-color: #555;
}
/* Modalità scura */
body.dark-mode {
background-color: #333; /* Grigio scuro */
color: white; /* Testo bianco */
}
/* Assicurati che tutti i contenuti seguano il colore della modalità scura */
body.dark-mode,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode a,
body.dark-mode li,
body.dark-mode div {
color: white; /* Forza il testo bianco in modalità scura */
}
/* Transizione per i link */
body.dark-mode a {
color: lightblue; /* Cambia colore per i link in modalità scura */
}
</style>
<body>
<h1>Benvenuto nella Modalità Cambia Colori</h1>
<p>Clicca il pulsante per attivare o disattivare la modalità scura.</p>
<p>Ecco un esempio di <a href="#">collegamento</a> che cambia colore in modalità scura.</p>
<button class="toggle-button" onclick="toggleDarkMode()">Toggle Dark Mode</button>
<script>
function toggleDarkMode() {
// Aggiunge o rimuove la classe "dark-mode" dal body
document.body.classList.toggle('dark-mode');
}
</script>
</body>
Una volta provato posizionalo dove vuoi dagli un effetto ad entrata ed elimina le voci che non servono tipo benvenuto ecc........ SE poi non è questo quello che cerchi devi aspettare che lo creo con una grafica accattivante che poi troverai sul mio sito.
... praticamente non sono altro che due pagine diverse. ... ... quello che si è sempre detto per fare o simulare le pagine accessibili...
(... una delle mie soluzioni per altocontrasto mi pare che te lo avevo già segnalato....)
.
Infatti quello lo sanno fare pure all'asilo lui lo voleva a codice sulla stessa pagina.
La direttiva prevede l'obbligatorietà per tutte le aziende che hanno un fatturato pari o superiore ai 2ml di euro (fonte di Paragone Gianluigi ex onorevole). Se mai fosse in parecchi possiamo dormire tranquilli.
... no! ... ... anche se pochi ci arrivano, ...ma lui voleva replicare l'esempio linkato, quindi la risposta valida in merieto vedo che l'aveva già data in anticipo di qualche minuto anche Claudio...
.
Sul primo post leggo: Qualcuno sa come si può swappare facilmente di contrasto? Come si può intervenire anche con poco codice aggiuntivo?
L'idea gli è venuta guardando il template in vendita di Incomedia, dove Claudio ha fatto notare che su quel template non era presente alcun codice specifico. La mia risposta, invece, si è concentrata su come si potrebbe intervenire concretamente, fornendo una delle tante soluzioni possibili, indipendentemente da chi l'abbia data per primo.
L'obiettivo dovrebbe essere aiutare chi chiede supporto, non fare una classifica su chi risponde prima per guadagnarsi il merito della "risposta perfetta". Se il mio suggerimento è utile, allora è una risposta valida a prescindere.
bho...
io gli ho detto com'era stato ottenuto quel risultato in quel template... specificando pure "purtroppo nessun effetto speciale", poi ovvio che se si vuole ottenere, senza duplicare le pagine, servono dei codici...
e quindi per il discorso del contrasto mi pare più consono, ma tutti i suggerimenti sono ben accetti e possono fare da spunto per altro, questo post con il codice di KolAsim, che prima "al volo" non ho trovato... essendo di passaggio tra un lavoro ed un altro..
https://helpcenter.websitex5.com/de/post/268140
Autor
Ok proverò utilizzare il codice di Claudio ed anche quello di kOL, ma ritornando all'esempio del template avevo visto che non cambiava il nome del HTML e quindi pensavo che chi ha fatto il template avesse adottato una soluzione diversa dal duplicare semplicemente la pagina . . .
no, non vedi cambiare il nome della pagina perchè viene mostrata in frame... quindi nell'url vedrai sempre lo stesso nome
https://livepreview.incomedia.eu/x5t/v2024.4/car/index.html
esatto !
Autor
OK adesso con il tuo link si capisce bene, pensavo di aver trovato l'uvo di colombo.
Proverò con il codice aggiuntivo.
... su questo non c'è dubbio, ma, se leggi bene io rispondevo in merito a citazione...
... riguardo al tuo codice, sarà sicuramente utile, .... magari sbaglio io ad interpretare a vista(!), ma a colpo d'occhio non vedo come Alberto possa tentare di usarlo nel nostro programma, mi sembra incompatibile, più adatto forse a chi vuol far da se senza WSx5...
...
...
....................
...
... per chi incuriosito per caso leggesse qui, ... come altra mia idea esclusiva concreta ma da sviluppare e che si potrebbe tentare di fare, per chi volesse usare il programma solo relativamente ad altocontrasto con sito unico (e non all'accesibilità(!)), ... si potrebbe fare in questo modo:
1) - realizzare un primo sito (base) il sito in altocontrasto positivo, ed esportare su PC;
2) - duplicare il sito (di servizio) modificandolo in altocontrasto negativo, ed esportare su PC;
3) - nel Progetto primo sito base allegare i relativi files de fogli di stile del sito duplicato;
4) - nel Passo_1 del sito base aggiungere in Esperto /HEAD i secondi fogli di stile;
5) - nel sito base mettere in header un pulsante (interruttore) altocontrasto/SI-NO (codice minimale), che attivi o meno i relativi fogli CSS...
... conoscendo questo schema tutti quelli a cui piace far da se posso provarci...
... in pratica verrebbe usato come unico sito ed esportato il sito base...
... in seguito a modifiche e/o aggiunte nel sito con oggetti congrui, il pulsante altocontrasto dovrebbe agire automaticamente su tutta la pagina, senza così dover escogitare complicati codici di controllo extra...
.
ciao
.
Il codice fornito agisce sulla pagina da bianco a grigio scuro con testi in risalto, quindi niente di particolarmente complesso. È un codice molto semplice che a prima vista potrebbe sembrare incompatibile con il template in questione, ma con alcune modifiche potrebbe essere adattato. Tuttavia, noto che nel NOSTRO programma l'azienda incomedia continua a utilizzare i frame, che sono ormai obsoleti e presentano vari problemi legati alla SEO e alle incompatibilità con i browser moderni. Forse sarebbe più opportuno considerare layout basati su CSS Grid o Flexbox, che offrono maggiore flessibilità e migliori prestazioni, anche per chi vuol far da sé.
Autor
Si KOL è proprio così, io pensavo che sul template fosse stato inserito un "codice" che cliccando sui pulsanti bianco/nero andava a commutare il CSS modificando il contrasto, invece sono due pagine distinte che sappiamo fare tutti...
se riesci ad inventarti un codice "swap" dei CSS da inserire sul menu o su un pulsante, praticamente hai risolto il problema
... prepara il sito realizzandolo in modo congruo allo scopo, con allegati (cartella files) i secondi files CSS per il negativo, ed inseriti nei tag <li rel> del passo_1...
... in teoria per questo scopo quelli interessati dovrebbero essere questi:
style/reset.css
style/print.css
style/style.css
style/template.css
appsresources/font-awesome.css
pcss/index.css
... quando e se avrai fatto poi si passerà sulla base del tuo LINK a valutare il relativo codice...
.
ciao
.
Autor
Ok ho pubblicato il sito di prova, queste le due pagine interessate
- pagina1
- pagina2
-> non ho capito bene<li rel> del passo 1 (almeno non lo trovo !)
quindi devo preparare 2 cartelle con questi files ?
... praticamente hai replicato il template che avevi linkato, ...bravo, ... e come vedi è quello che abbiamo sempre suggerito, potendo così assolvere se vuoi a tutte le caratteristiche che vorresti implementare, ...ed in teoria avresti già risolto così...
... riguardo i tuoi STAMP, sì, ... ma in questo caso essendo la seconda pagina dello stesso sito non serve allegarli...
... quello che dovresti fare è di aggiungere in /HEAD i relativi tag <li rel>...per poter attivare poi l'interruttore di stile nella prima pagina...
... mo se trovo del tempo gli darò un'occhiata ...
.
... OK ... sulla base di quello che hai postato, ...questa è la mia invenzione sui fogli di stile che avevo anticipato:
<script>
$(document).ready(function(){//K>;
/** -- altocontrasto sul controllo dei fogli di style, esclusivo[269954] by KolAsim -- **/
ritardoK = 3;
link_rel2K = '<link rel="stylesheet" href="pcss/pagina-2.css?2023-3-11-1-638763382967741942" media="screen,print" />';
$("head").append (link_rel2K)
$('link[href="pcss/pagina-2.css?2023-3-11-1-638763382967741942"]').prop('disabled', true);
setTimeout(function(){ //K1>;
imgAltoContrastoK = '<img id = "acK" src = "https://cdn-icons-png.flaticon.com/512/4281/4281268.png" width = "50" '+
' onmouseover="this.style.opacity = 0.7" onmouseout="this.style.opacity = 1"'+
' title = "inverti contrasto" style = "position:fixed;top:50px;left:50px;z-index:1000000;cursor:pointer">';
$("body").append(imgAltoContrastoK)
nK = 0;
$('#acK').click(function() {//K2<<;
if (nK == 0) {//K3>;
$('link[href="pcss/pagina-1.css?2023-3-11-1-638763382967041809"]').prop('disabled', true);
$('link[href="pcss/pagina-2.css?2023-3-11-1-638763382967741942"]').prop('disabled', false);
nK = 1;
} else {//K3<< | K4>;
$('link[href="pcss/pagina-1.css?2023-3-11-1-638763382967041809"]').prop('disabled', false);
$('link[href="pcss/pagina-2.css?2023-3-11-1-638763382967741942"]').prop('disabled', true);
nK = 0;
};//K4<<;
});//K2<<;
}, ritardoK*1000); //K1<<;
});//K<<;
</script>
..................................
... ovviamente da incollare nelle prprietà della pagina_1 in 3^opz. /HEAD...
...
... altro che AI (ahi!ahi!ahi!)...
.
... intanto che ci pensavo, ti posto anche la mia invenzione di solo altocontrasto, estratto dal suggerimento che ti aveva già fornito prima Claudio, e che avevo ridotto e postato nel forum tedesco....
... se il sito è congruo, con piccoli aggiustamenti si potrebbe adattare per tutti gli scopi per il solo altocontrasto...
... lo puoi provare immediatamente nella stessa pagina che hai postato prima...
<script>
$(document).ready(function(){//K>;
/** -- altocontrasto - by KolAsim -- **/
ritardoK = 3; // seconds delay for code start on page load;
//-----------------------------------------------------------------------------
setTimeout(function(){ //K1>;
styleK='<style> #imStickyBarContainer{display:none!important}'+
' #cacK{position:fixed;top:0px; left:0px;'+
'z-index:1000000;border-radius: 50px; !important;}'+
' #cacK2{width:70px;margin:auto;border-radius: 50px;border:solid 4px Gray;background-color:beige!important}'+
' #contrastoK, #reloadK {position:relative;width:30px;'+
'border-radius:50%;border:solid 2px silver;background-color:lavender !important;cursor:pointer} '+
'#contrastoK:hover, #reloadK:hover , {border:solid 2px Green }</style>';
$("head").append(styleK);
altocontrastoK = '<div id = "cacK" ><div id = "cacK2" style=" ">'+
'<img id="contrastoK" class="contrastoK" src="https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg" '+
' title="hoher Kontrast\nschwarz ◑ weiß" >'+
'<img id="reloadK" class="reloadK" src="https://www.svgrepo.com/show/495633/refresh-circle.svg" '+
' onclick="location.reload()" title="auf Standard zurücksetzen" > </div></div>';
$("body").append(altocontrastoK)
nK = 1;
$(".contrastoK").click(function(){//K>2;
if(nK !=1 ) {//K3>;
$(this).val("BIANCO/nero");
$("body *:not(#cacK):not(#imCell_3 , #imCell_3 div):not(#imPageRow_1)").css("background-color", "white").css("color", "black")
nK=1;
} else {//K3<<+K4>;
$(this).val("NERO/bianco");
$("body *:not(#imCell_3,#imCell_3 div):not(#imPageRow_1)").css("background-color", "black").css("color", "white");
nK=2;
};//K4<<;
});//K2<<;
$(".contrastoK").hover(function(){//K5>;
$(this).attr("src","https://www.svgrepo.com/show/436703/circle-righthalf-fill.svg")
}, function(){//K6>;
$(this).attr("src","https://www.svgrepo.com/show/436702/circle-lefthalf-fill.svg")
});//K5+K6<<;
$("#reloadK").hover(function(){//K7>;
$(this).attr("src","https://www.svgrepo.com/show/495638/repeat-circle.svg")
}, function(){//K8>;
$(this).attr("src","https://www.svgrepo.com/show/495633/refresh-circle.svg");
});//K7+K8<<;
}, ritardoK*1000); //K1<<;
});//K<<;
</script>
.
...
... altro che AI (ahi!ahi!ahi!)...
.
Secondo me non è quello che cerca l'utente perchè cambia da bianco a nero ivi compresi content slider ed eventuali moduli inseriti nella pagina che spariscono insieme alle immagini appena si attiva la procedura... insomma... secondo me è fatto e va bene per l'accessibilità non per un cambio di fogli di stile con i controcoio e con regole personalizzate ma potrei sbagliarmi. Probabile che cerchi proprio questa situazione con il codice extra da te suggerito sempre utile e apprezzato.
Autor
Ciao a tutti
in giornata provo le soluzioni indicate e vediamo così vedremo il risultato
Autor
Bene ho pubblicato, il primo codice è l'ideale perche fa proprio lo swap dei CSS secondo le mie impostazioni.
Il secondo è più avanzato l'ho provato e va addirittura alterare i colori di sfondo e dei caratteri.
Ho preferito il primo perchè è fuzionale alla mia richiesta, ora sarebbe l'ideale poterlo attivare dal pulsante "CONTRASTO" così posso spostarlo o centrarlo nell'Header
link per vedere
1) ... al tuo pulsante CONTRASTO togli l'attuale collegamento alla "pagina-1.html";
2) ... al tuo pulsante CONTRASTO per il collegamento usa la mia invenzione per i codici EXTRA, cioè applica l'opzione File o URL | File su Internet e nel campo di input digita solo ed esattamente questo:
javascript:contrastoK()
3) ... togli l'attuale mio codice e riesporta;
... quando avrai fatto. ...avvisami, ... che valuterò se il pulsante funziona come da mio modo detto, e potrò quindi valutare le varianti per la funzione da associare, (rilevabile dallo stesso precedente codice)...
.
Autor
ok ho eseguito i punti 1), 2) e 3) ed esportato . . .
... OK ... il pulsante ha preso correttamente il comando EXTRA, e questa è la funzione che ho inventato per tale scopo:
<script>
$(document).ready(function(){//K>;
/** -- cambiocontrasto sul controllo dei fogli di stile, esclusivo-2[269954] by KolAsim -- **/
foglioK1 = "pcss/pagina-1.css?2023-3-11-1-638766815295009094";
foglioK2 = "pcss/pagina-2.css?2023-3-11-1-638766815294639093";
link_rel2K = '<link rel="stylesheet" href="'+foglioK2+'" media="screen,print" />';
$("head").append (link_rel2K);
$('link[href="'+(foglioK2)+'"]').prop('disabled', true);
nK = 0;
});//K<<;
//--------------- fK-------------------------
function contrastoK(){//contrastoK()>;
if (nK == 0) {//K1>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', true);
$('link[href="'+(foglioK2)+'"]').prop('disabled', false);
nK = 1;
} else {//K1<< | K2>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', false);
$('link[href="'+(foglioK2)+'"]').prop('disabled', true);
nK = 0;
};//K2<<;
};//contrastoK()<<;
</script>
.
ciao
.
ps: ... il codice l'ho fatto in modio che quando modifichi ed esporti puoi incollare facilmente il nuovo URL anti cache che potrebbe cambiare ad ogni esportazione...
(... volendo si potrebbe fare in modio di non essere vincolati all'anti cache accoppiando altra mia invenzione, che userebbe l'URL del file css senza l'estensione con la variabile ?xxxxx...)
-
Autor
Direi che funziona bene il pulsante a parte un po il ritardo, forse si può abbassare ?
però ho notato che sulla pagina bianca il testo rimane bianco e non nero...
... non hai aggiornato-modificato gli URL, non corrispondono alla pubblicazione, come indicato prima qui:
... prova a correggere...
... eventualmente si potrebbe proivare con l'invenzione aggiunta in ps corsivo, ma su questo non ne sono sicuro sino a prova...
.
Autor
Ma ... strano eppure non ho modificato nulla (a parte l'inserimento del tuo codice suggerito) ora ho provato a rimettere il codice precedente è si comporta nello stesso modo, cosa può essere cambiato ?
... il problema sta nel nome dei files detto prima che non corrispondono...
... nel codice ci sono questi URL/HREF:
pcss/pagina-1.css?2023-3-11-1-638763382967041809
pcss/pagina-2.css?2023-3-11-1-638763382967741942
... (!) ...che non corrispondono con quelli reali del Programma, e che invece attualmente online sono questi:
pcss/pagina-1.css?2023-3-11-1-638767642695157097
pcss/pagina-2.css?2023-3-11-1-638767642695157097
... come vedi cambia l'estensione dopo il suffisso "?"...
... forse gli URL/HREF cambiano automaticamente in esportazione con suffisso data anticache...
...!... forse bisognerebbe vedere di aggirare questo problema come anticipato precedentemente con un approccio diverso...!...
... se trovo tempo ti farò sapere con quella idea che avevo in testa...
.
Autor
Ok ho capito, si effettivamente vorrei capire anch'io se questo numero "2023-3-11-1-638767642695157097" (per esempio) cambia quando modifico o aggiungo o cancello le pagine!
Faccio delle prove e poi scrivo qui.
... OK ... fammi sapere delle tue verifiche ... ...
Autor
Ho fatto diverse prove inserendo il numero esatto dopo il "2023-3-11-1-xxxxxxxxxxxxxxx" purtroppo cambia ogni volta che salvo e quindi il codice ha sempre i riferimenti sbagliati.
Ho provato addirittura a toglierlo lasciando solo "2023-3-11-1" il risultato è lo stesso...
...
... OK ... l'avevo immaginato, presunto, ...putroppo; ... sarebbe stato troppo facile...
...
...
.......................
... prova online con questa variante:
1) ... intercetto le due pagine pcss/ +
2) ... annullo l'anti-cache +
3) .., assegno dinamicamente il mio anticackeK (si potrebbe evitare) +
4)... applico il controllo ai pcss/ derivati
.......................
<script>
$(document).ready(function(){//K>;
/** -- altocontrasto con anti-cache sul controllo dei fogli di style, esclusivo2[269954] by KolAsim -- **/
anticacheK="?" + new Date().getTime();
foglioK1= "pcss/pagina-1.css"; // radice pura del foglio di stile 1;
foglioK2= "pcss/pagina-2.css"; // radice pura del foglio di stile 2;
nrcaratteriK1 = foglioK1.length;
nrcaratteriK2 = foglioK2.length;
nK = 0;
linkrelK()
});//K<<;
//--------------fK---------------------
function contrastoK(){//contrastoK()>;
if (nK == 0) {//K1>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', true);
$('link[href="'+(foglioK2)+'"]').prop('disabled', false);
nK = 1;
} else {//K1<< | K2>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', false);
$('link[href="'+(foglioK2)+'"]').prop('disabled', true);
nK = 0;
};//K2<<;
}//contrastoK()<<;
//--------------fK---------------------
function linkrelK(){//linkrelK()>;
k = k2 = kstr = kk = kk2 = linkrel = [];
K = $('link[rel="stylesheet"]' );
//---------------forK1----------------
for( i = 0, TotK = K.length; i < TotK; i++){//forK1>;
k[i] = $(K[i]).attr("href");
kk[i] = k[i].indexOf(foglioK1);
if(kk[i] != -1){//K1>;
k[i] = $(K[i]).attr("href");
kstr[i] = k[i];
linkrel[i] = kstr[i].substring(0,nrcaratteriK1)
linkrel[i] = linkrel[i]+ anticacheK;
foglioK1 = linkrel[i];
//alert("link 1 " +linkrel[i]);
k[i] = $(K[i]).attr("href", linkrel[i]);
//k[i] = $(K[i]).attr("href", linkrel[i] + anticacheK);
};//K1<<;
};//forK1<<;
//---------------forK2----------------
for( ii = 0, TotK = K.length; ii < TotK; ii++){//forK2>;
k2[ii] = $(K[ii]).attr("href");
kk2[ii] = k2[ii].indexOf(foglioK2);
if( kk2[ii] != -1 ){//K1>;
k2[ii] = $(K[ii]).attr("href");
kstr[ii] = k2[ii];
linkrel[ii] = kstr[ii].substring(0,nrcaratteriK2) ;
linkrel[ii] = linkrel[ii]+ anticacheK;
foglioK2 = linkrel[ii];
//alert("link 2 " +linkrel[ii]);
k2[ii] = $(K[ii]).attr("href", linkrel[ii] );
$('link[href="'+linkrel[ii]+'"]').prop('disabled', true);
};//K1<<;
};//forK1<<;
//--------------------------------------
};//linkrelK<<;
</script>
...................................
.
ciao
.
Autor
Bene ora mi sembra che sia perfetto, fa lo swap anche dell'immagine, basta solo adeguare il codice del bottone "CONTRASTO"
Oppure dovrà essere utilizzato con i due link che hai messo come pagina1 e pagina2 ?
Autor
No aspetta .... non fa un swap vero e proprio, ma passa dalla pagina 1 alla 2...
... attualmente mi pare che non hai allegato, o meglio, dichiarato in HEAD il foglio di stile della pagina2...
... per attivare il contrasto cliccando sull'immagine in basso, usa questo codice nello SCRIPT:
$("#imObjectImage_3_07_container img").click(function(){contrastoK()}).css("cursor","pointer")
.
Autor
Si, è vero non ho inserito sulla sezione /HEAD, può andare bene così:
<li rel="stylesheet" href="pcss/pagina-2".css/>
... no!
... ma così:
<link rel="stylesheet " href="pcss/pagina-2.css" media="screen,print" />
.
Autor
ok KOL riassumendo:
inserire il codice nella 3° opzione /HEAD della pagina 1:
<script>
$(document).ready(function(){//K>;
/** -- altocontrasto con anti-cache sul controllo dei fogli di style, esclusivo2[269954] by KolAsim -- **/
anticacheK="?" + new Date().getTime();
foglioK1= "pcss/pagina-1.css"; // radice pura del foglio di stile 1;
foglioK2= "pcss/pagina-2.css"; // radice pura del foglio di stile 2;
nrcaratteriK1 = foglioK1.length;
nrcaratteriK2 = foglioK2.length;
nK = 0;
linkrelK()
});//K<<;
//--------------fK---------------------
function contrastoK(){//contrastoK()>;
if (nK == 0) {//K1>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', true);
$('link[href="'+(foglioK2)+'"]').prop('disabled', false);
nK = 1;
} else {//K1<< | K2>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', false);
$('link[href="'+(foglioK2)+'"]').prop('disabled', true);
nK = 0;
};//K2<<;
}//contrastoK()<<;
//--------------fK---------------------
function linkrelK(){//linkrelK()>;
k = k2 = kstr = kk = kk2 = linkrel = [];
K = $('link[rel="stylesheet"]' );
//---------------forK1----------------
for( i = 0, TotK = K.length; i < TotK; i++){//forK1>;
k[i] = $(K[i]).attr("href");
kk[i] = k[i].indexOf(foglioK1);
if(kk[i] != -1){//K1>;
k[i] = $(K[i]).attr("href");
kstr[i] = k[i];
linkrel[i] = kstr[i].substring(0,nrcaratteriK1)
linkrel[i] = linkrel[i]+ anticacheK;
foglioK1 = linkrel[i];
//alert("link 1 " +linkrel[i]);
k[i] = $(K[i]).attr("href", linkrel[i]);
//k[i] = $(K[i]).attr("href", linkrel[i] + anticacheK);
};//K1<<;
};//forK1<<;
//---------------forK2----------------
for( ii = 0, TotK = K.length; ii < TotK; ii++){//forK2>;
k2[ii] = $(K[ii]).attr("href");
kk2[ii] = k2[ii].indexOf(foglioK2);
if( kk2[ii] != -1 ){//K1>;
k2[ii] = $(K[ii]).attr("href");
kstr[ii] = k2[ii];
linkrel[ii] = kstr[ii].substring(0,nrcaratteriK2) ;
linkrel[ii] = linkrel[ii]+ anticacheK;
foglioK2 = linkrel[ii];
//alert("link 2 " +linkrel[ii]);
k2[ii] = $(K[ii]).attr("href", linkrel[ii] );
$('link[href="'+linkrel[ii]+'"]').prop('disabled', true);
};//K1<<;
};//forK1<<;
//--------------------------------------
};//linkrelK<<;
</script>
inserire il codice nella 3° opzione /HEAD del passo 1
<link rel="stylesheet " href="pcss/pagina-2.css" media="screen,print" />';
inserire questo codice (al posto del link URL) nel pulsante "CONTRASTO"
javascript:contrastoK()
questo sull'immagine ? in basso ?? dove ?
$("#imObjectImage_3_07_container img").click(function(){contrastoK()}).css("cursor","pointer")
... prima metti la dichiarazione <link rel=
... poi metti lo script
... il codice per il click sull'immagine lo metti all'inizio dello script, prima della chiusura });//K<<;
così:
**********
nK = 0;
linkrelK()
$("#imObjectImage_3_07_container img").click(function(){contrastoK()}).css("cursor","pointer")
});//K<<;
//--------------fK---------------------
.
Autor
Ok, mi sembra di aver fatto tutto come da tue indicazioni, ed il codice funziona !
(non so se hai notato il carattere dei testi è in grassetto sulla pagina con la fascia marrone)
@Aberto, per curiosità , quale è il link dove si può vedere ?
Autor
Ciao Claudio, eccolo qui
... ++ ... a colpo d'occhio penso che nel codice andrebbe aggiunta una ulteriore istruzione...
> all'inizio dello script, prima della chiusura });//K<<; ...aggiungere la stringa qui in grassetto:
*********
$('link[href="pcss/pagina-2.css"]').prop('disabled', true);
});//K<<;
... questo perchè alla prima apertura del LINK attuale mi appare la pagina con contenuti in bianco...
...
(*) - nel punto 2) dello schema iniziale facevo riferimento ad un duplicatio del Progetto, base del mio ragionamento che era teorico, e che appunto in teoria dovrebbe mantenere gli stessi nomi/ID dei selettori...
.
Autor
Ok kol, ho fatto la modifica e ho riduplicato la pagina controllndo meglio, ma il problema rimane, vedi Pagina 2 originale
... adesso la pagina si apre regolarmente in blu, ma nel contrasto in bianco rimane in grassetto e non selezionabile...
... con il codice di altocontrasto mi era parso che invece la struttura rimaneva regolare...
... prova a togliere il mio codice attuale, lasciando in HEAD solo la dichiarazione:
<link rel="stylesheet " href="pcss/pagina-2.css" media="screen,print" />';
... se troverò tempo in giornata più tardi proverò a fare una valutazione...
.
Autor
Ok KOL fai con calma, non ho alcuna fretta...
... ci sono nella pagina degli stili "inline" che non sono considerati nel foglio di style...
... quello che penso che si potrebbe fare per ottenere un risultato accettabile sarebbe di procedere in questo modo:
1) - creare la pagina-1 in stile "positivo" con stile dei testi monocromatico, più o meno come avevi fatto prima;
2) - duplicare la pagina-1 e rinominare pagina-2;
3) - mettere in HEAD della pagina-1 il lik- rel della pagina-2 senza suffisso (?eccetera);
4) - personalizzare sfondi e quant'altro possibile nelle Proprietà della pagina-2 in stile "negativo", più o meno come avevi fatto prima;
5) - riutilizzando il mio precedente ed ultimo script andrebbe aggiunta una istruzione per cambiare colore alternato al testo di tutta la pagina, ed una per cambiare l'immagine da alternare...
.
Autor
ecco, ho seguito tutti i punti come hai scritto . . . prova a dare un occhiata
...!... purtroppo mi si presenta il problema precedente, testo che perde la formattazione e non selezionabile...!...
... io ho fatto una simulazione e mi funziona rispettando questi passi, e se ho dimenticato qualcosa ci risentiremo:
1) - nel progetto non ci deve essere la pagina chiamata pagina 2 (pagina-2-html);
2) - compilare la pagina 1; versione positiva; tutto il testo in colore univoco, per es. nero, o quello che preferisci;
3) - in MAPPA-Passo_3 copiare ed incollare la pagina 1 (duplicato);
4) - rinominare il duplicato di pagina 1 in pagina 2 ( (pagina-2-html);
5) - nelle Proprietà della nuova pagina 2 personalizzare dove possibile gli sfondi con i colori di contrasto che preferisci;
6) - nel Passo_4 a tutto il testo puoi assegnare il colore di contrasto univoco che preferisci, ma sarà irrilevante perchè non verrà rilevato nel foglio di stile controllato dal mio codice; questo colore lo si dovrà dichiarare nel mio codice;
7) - adesso in Proprietà della pagina 1 dichiarare:
<link rel="stylesheet" href="pcss/pagina-2.css" media="screen,print" />
... come già avevi fatto, ma nella tua pagina online la stringa non è corretta, alla fine del tag ci sono questi caratteri di troppo (';) che vanno eliminati...
... quindi questo è il mio precedente codice aggiornato con il controllo del colore e dell'immagine; ...poi i colori (blu/rosso) (blue/red) si potranno personalizzare come si crede meglio:
<script>
$(document).ready(function(){//K>;
/** -- altocontrasto con anti-cache sul controllo dei fogli di style, esclusivo2[269954] by KolAsim -- **/
anticacheK="?" + new Date().getTime();
foglioK1= "pcss/pagina-1.css"; // radice pura del foglio di stile 1;
foglioK2= "pcss/pagina-2.css"; // radice pura del foglio di stile 2;
nrcaratteriK1 = foglioK1.length;
nrcaratteriK2 = foglioK2.length;
nK = 0;
linkrelK()
$("#imObjectImage_3_07_container img").click(function(){contrastoK()}).css("cursor","pointer")
});//K<<;
//--------------fK---------------------
function contrastoK(){//contrastoK()>;
if (nK == 0) {//K1>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', true);
$('link[href="'+(foglioK2)+'"]').prop('disabled', false);
$('body * ').css("color","red");
$("#imObjectImage_3_07_container img").attr("src","https://www.microtronics.it/lang5/images/blue-n.png")
nK = 1;
} else {//K1<< | K2>;
$('link[href="'+(foglioK1)+'"]').prop('disabled', false);
$('link[href="'+(foglioK2)+'"]').prop('disabled', true);
$('body * ').css("color","blue");
$("#imObjectImage_3_07_container img").attr("src","https://www.microtronics.it/lang5/images/blue-b.png")
nK = 0;
};//K2<<;
}//contrastoK()<<;
//--------------fK---------------------
function linkrelK(){//linkrelK()>;
k = k2 = kstr = kk = kk2 = linkrel = [];
K = $('link[rel="stylesheet"]' );
//---------------forK1----------------
for( i = 0, TotK = K.length; i < TotK; i++){//forK1>;
k[i] = $(K[i]).attr("href");
kk[i] = k[i].indexOf(foglioK1);
if(kk[i] != -1){//K1>;
k[i] = $(K[i]).attr("href");
kstr[i] = k[i];
linkrel[i] = kstr[i].substring(0,nrcaratteriK1)
linkrel[i] = linkrel[i]+ anticacheK;
foglioK1 = linkrel[i];
//alert("link 1 " +linkrel[i]);
k[i] = $(K[i]).attr("href", linkrel[i]);
//k[i] = $(K[i]).attr("href", linkrel[i] + anticacheK);
};//K1<<;
};//forK1<<;
//---------------forK2----------------
for( ii = 0, TotK = K.length; ii < TotK; ii++){//forK2>;
k2[ii] = $(K[ii]).attr("href");
kk2[ii] = k2[ii].indexOf(foglioK2);
if( kk2[ii] != -1 ){//K1>;
k2[ii] = $(K[ii]).attr("href");
kstr[ii] = k2[ii];
linkrel[ii] = kstr[ii].substring(0,nrcaratteriK2) ;
linkrel[ii] = linkrel[ii]+ anticacheK;
foglioK2 = linkrel[ii];
//alert("link 2 " +linkrel[ii]);
k2[ii] = $(K[ii]).attr("href", linkrel[ii] );
$('link[href="'+linkrel[ii]+'"]').prop('disabled', true);
};//K1<<;
};//forK1<<;
//--------------------------------------
};//linkrelK<<;
</script>
.
ciao
.
Autor
Ok si tutto chiaro, ora ho riesportato se vuoi controllare...
Ho un dubbio su questa dichiarazione:
1) - nel progetto non ci deve essere la pagina chiamata pagina 2 (pagina-2-html);
Quindi devo creare il duplicato pagina-2-html (per forza altrimenti non mi crea il CSS), ma devo toglierlo dall'FTP ??
... nel Passo_3 MAPPA, se c'è la pagina 2 questa la elimini dalla lista...
... poi selezioni la pagina 1 la copi e la incolli...
... questo duplicato lo rinomini pagina 2 e controlla che si chiami (pagina-2-html)...
...
... si fa questo giro per vedere se anche a te si risolve quel problema di prima, che a me nella mia simulazione non si verifica...
... quando avrai fatto la prova si saprà se la struttura rimarrà uguale o se verrà modificata come quella del problema...
.
... non avevo controllato il tuo LINK...
... adesso funziona meglio, il testo è selezionabile ma(!) perde la giustificazione che diventa centrata, come quella del problema...
...
... se non avevi fatto la duplicazione della pagina 1, prova adesso, così avremo finalmente il risultato finale, se valido o meno...
.
... intanto cambia anche il colore blue in white ed il colore red in black ...
Autor
ok, domani correggo, oggi la nostra rete va e non va ...
Autor
Ecco, ora ho modificato il colore dei caratteri, a parte il grassetto, il resto mi sembra ok...
... mi pare che tu hai fatto tutto correttamente, ...e ho aggiornato il link diverse volte...
... ma....!... ...... non sono riuscito a capire da dove venga il grassetto e la giustificazione centrale, essendo il css quello della pagina2...!...!?...
... in una mia simulazione locale il mio procedimento mi funziona secondo aspettative, nè più nè meno di quel che hai fatto tu: ... mi dispiace...
.
ciao
.
Autor
Comunque mi può bastare, casomai mi metto con calma e provo a rifare il progetto di prova da zero, grazie KOL
... grazie anche a te per aver sperimentato; ...in caso di novità ci risentiremo altrove...
ciao
.