cambiare il font con un pulsante

30-03-2009, 16.44.03

Sapete qualche script su internet
non trovo niente in internet

**miki92** · 30-03-2009, 17.45.29

Ho creato questo script al momento...inutile dire che su Windows Funge:

Codice HTML:

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Nota la differenza del testo</title>
<script type="text/javascript">
function CambiaFont(font){
document.getElementById('dove_cambiare_font').style.fontFamily = font;
}
</script>
</head>

<body>
<div id="dove_cambiare_font" style="font-family:Arial, Helvetica, sans-serif">Nota la differenza del testo</div>
<br /><br />
Font del div:
<input type="button" onclick="CambiaFont('Arial, Helvetica, sans-serif')" value="Default" /> 
| <input type="button" onclick="CambiaFont('Trebuchet MS')" value="Trebuchet MS" /> 
| <input type="button" onclick="CambiaFont('Comic Sans MS')" value="Comic Sans MS" />
</body>

</html>

30-03-2009, 17.57.11

ti ringrazio del aiuto
ma avevo pensato sul tipo se e possibili fare cosi
<input type="radio" value="Courier" checked>Courier
la possibilità di scegliere la grandezza 8 10 12 px
e la possibilità di cambiare colore al carattere...

pensi che sia possibile^^

**miki92** · 30-03-2009, 18.02.19

Se mi dai maggiori informazioni, ti modificherò lo script come tu vuoi...non ci metto nulla:

1. Queste modifiche (testo, colore) devono essere effettuato su tutta la pagina, o solo in un form, div, ecc..?

2. La grandezza, la font ed il colore devono essere scelti tutti tramite ceckbox?

30-03-2009, 18.06.52

ti ringrazio del aiuto
devono essere fatte su tutta la pagina
per il testo e la grandezza si ceckbox
per il colore pensavo di fa in un altro modo
tipo cliccando su un testo o immagine e apre un immagine dove compaiono i colori per scegliere...

**miki92** · 30-03-2009, 18.12.39

Beh...io ti posto un esempio di script...poi fai come vuoi per il colore:

Codice HTML:

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Nota la differenza del testo</title>
<script type="text/javascript">
function CambiaFont(font){
document.body.style.fontFamily = font;
}
function CambiaColore(colore){
document.body.style.color = colore;
}
function CambiaGrandezza(px){
document.body.style.fontSize = px;
}
</script>
</head>

<body>
FUORI DAL DIV
<div id="dove_cambiare_font" style="font-family:Arial, Helvetica, sans-serif">Nota la differenza del testo</div>
<br /><br />
Font:<br />
<input type="radio" name="font" onclick="CambiaFont('Arial, Helvetica, sans-serif')" checked="checked" /> Arial, Helvetica, sans-serif<br />
<input type="radio" name="font" onclick="CambiaFont('Trebuchet MS')" /> Trebuchet MS<br />
<input type="radio" name="font" onclick="CambiaFont('Comic Sans MS')" /> Comic Sans MS<br />
Colore:<br />
<input type="radio" name="colore" onclick="CambiaColore('#FF0000')" /> Rosso<br />
<input type="radio" name="colore" onclick="CambiaColore('#0000FF')" /> Blu<br />
<input type="radio" name="colore" onclick="CambiaColore('#000000')" checked="checked" /> Nero<br />
Grandezza:<br />
<input type="radio" name="grandezza" onclick="CambiaGrandezza('8px')" /> 8px<br />
<input type="radio" name="grandezza" onclick="CambiaGrandezza('10px')" checked="checked" /> 10px<br />
<input type="radio" name="grandezza" onclick="CambiaGrandezza('12px')" /> 12px<br />
</body>

</html>

Ci ho impiegato un po' più tempo di prima perchè non funzionava la parte di codice che applica la scelta a tutta la pagina...

30-03-2009, 18.29.05

scusa o un problemma dentro una tabella o dei dati nn cambiano perchè

**miki92** · 30-03-2009, 18.33.18

Mmm...ad occhio e croce non saprei dirti...mi posti il codice HTML della tua pagina completa...o un link attivo sul web così che testo di persona ed apporto le giuste modifiche?

30-03-2009, 18.37.43

ti posto un esempio circa

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>...</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<!-- Cambia Font -->

<script type="text/javascript">

function CambiaFont(font){

document.body.style.fontFamily = font;

}

function CambiaColore(colore){

document.body.style.color = colore;

}

function CambiaGrandezza(px){

document.body.style.fontSize = px;

}

</script>

<!-- Cambia Font -->



<!-- Stile Font -->

<style type="text/css">

<!--

body {

    color: #00F;

        background-image: url(http://www.terra32.net/site/images/wallpapers/blu_matrix.jpg);

}

td,th {

    color: #00F;

        background-image: url(http://www.terra32.net/site/images/wallpapers/blu_matrix.jpg);

}



#logout

{

font-family: Courier;

font-size: 1px;

}



p#title

{

font-size: 40px;

font-weight: bold;

color: #ffffff;

font-style: italic;

text-align: center;

}



#info

{

font-family: Courier;

font-size: 1px;

color: #03F;

}

#info_generata

{

font-size: 12px;

color: #03F;

}

-->

</style>

<!-- Stile Font -->



</head>

<body>











<table id="info" align="left" width="12%" border="1">

<td>

<div id="dove_cambiare_font" style="font-family:Comic Sans MS"></div>

<br><br>Font:<br>

<input type="radio" name="font" onclick="CambiaFont('Arial, Helvetica, sans-serif')">Arial<br>

<input type="radio" name="font" onclick="CambiaFont('Trebuchet MS')">Trebuchet MS<br>

<input type="radio" name="font" onclick="CambiaFont('Comic Sans MS')" checked="checked">Comic Sans MS<br>

Colore:<br>

<input type="radio" name="colore" onclick="CambiaColore('#0000FF')" checked="checked">Blu<br>

<input type="radio" name="colore" onclick="CambiaColore('#FF0000')">Rosso<br>

<input type="radio" name="colore" onclick="CambiaColore('#000000')">Nero<br>

Grandezza:<br>

<input type="radio" name="grandezza" onclick="CambiaGrandezza('12px')">12px<br>

<input type="radio" name="grandezza" onclick="CambiaGrandezza('14px')">14px<br>

<input type="radio" name="grandezza" onclick="CambiaGrandezza('16px')" checked="checked">16px<br>

</td>

</table>











<table width="80%" height="5%" align="center" border="1">

<tr>

<td align="center">







</td>

</tr>

</table>

<hr width="100%">

<table width="60%" height="40%" align="center" border="1">

<tr>

<td align="center">







</td>

</tr>

</table>

<hr width="100%">

























































</body>

</html>

**miki92** · 30-03-2009, 18.50.17

Prova a modificare JavaScript in questo modo:

Codice HTML:

<script type="text/javascript"> 
function CambiaFont(font){ 
document.body.style.fontFamily = font; 
document.getElementById('info').style.fontFamily = font; 
} 
function CambiaColore(colore){
document.body.style.color = colore; 
document.getElementById('info').style.color = colore; 
} 
function CambiaGrandezza(px){ 
document.body.style.fontSize = px; 
document.getElementById('info').style.fontSize = px;
} 
</script>

30-03-2009, 19.01.36

lascio come fa per ora funziona
Thx

Discussione: cambiare il font con un pulsante

LinkBack

Strumenti discussione

Display

cambiare il font con un pulsante

Regole di scrittura