Portal    Foro    Buscar    FAQ    Registrarse    Conectarse


JanuWeb.Com  Informa

JanuWeb es una Comunidad abierta a todos los internautas.
Pero algunos de sus contenidos (Adjuntos, Descargas, Grupos...) sólo son accesibles a usuarios registrados.

Regístrate y disfruta al completo de la web.


Portal » Foro » Diseño Web y Foros » Biblioteca del webmaster » Generador Color De Texto Y De Fondo

Fecha y hora actual: Miércoles, 07 Enero 2009, 18:05 | Todas las horas están en UTC + 1 Hora
Ver Tema Anterior Habilitar Biblioteca Descargar Tema Version Imprimible Enviar un correo a un amigo Ver Siguiente Tema
Publicar Nuevo Tema  El tema está bloqueado: no pueden editarse ni agregar mensajes. Página 1 de 1
 
Generador Color De Texto Y De Fondo
Autor Mensaje
spain.png Mundo Sexo: Masculino
Primate
Registrado: Septiembre 2008
Mensajes: 85
Ubicación: LEMG
 
Responder Citando
Mensaje Generador Color De Texto Y De Fondo 
 
Lo que pretendo con este tipo de codigos, es hacer una recopilacion de estos generadores, algunos son muy interesantes y muy utiles a la hora de crear vuestras paginas web, algunos son tan sencillos, que realmente te hace pensar que solo es dedicacion lo que necesita una web para programarla, por supuesto, llegar a ser webmaster, es cargandote muchas, probar y tirando de generadores para ayudarte

ya fuera de bromas, a mi me sirvieron de mucho, espero que a vosotros tambien os ayude


*** Con este código podrás cambiar el color de texto y de fondo pudiéndose ver el código al cual pertenece dicho color ***

[color=red]¡¡ OJO !! Pega este código dentro de las etiquetas <body> y </body> en la vista HTML[/color]

  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">
    <tr>
      <td width="100%"><!-- www.mundoairlines.net -->
<script>

var selectedObj
var scalaleft=10
var scalaright=265
var scalawidth=scalaright-scalaleft
var imgObj
var hexared="00"
var hexagreen="00"
var hexablue="00"
var hexa="#000000"
var selectedcolor="#000000"
var colorid
var coloridshort="displaycolorFG"

var browserinfos=navigator.userAgent
var IE=document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  

function setZIndex(obj, zOrder) {
    obj.zIndex = zOrder
}

function makeHexa(thiscol) {
    var colhex_left = Math.floor(thiscol/16)
    var colhex_right= thiscol-(colhex_left*16)
    if (colhex_left == 10) {colhex_left="A"}
    if (colhex_left == 11) {colhex_left="B"}
    if (colhex_left == 12) {colhex_left="C"}
    if (colhex_left == 13) {colhex_left="D"}
    if (colhex_left == 14) {colhex_left="E"}
    if (colhex_left == 15) {colhex_left="F"}  
    if (colhex_right == 10) {colhex_right="A"}
    if (colhex_right == 11) {colhex_right="B"}
    if (colhex_right == 12) {colhex_right="C"}
    if (colhex_right == 13) {colhex_right="D"}
    if (colhex_right == 14) {colhex_right="E"}
    if (colhex_right == 15) {colhex_right="F"}
    
    var colhex =""+colhex_left+colhex_right
    return colhex
}

function shiftTo(obj, x, y) {
    if (x<=scalaleft) {x=scalaleft}
    if (x>=scalaright) {x=scalaright}
    var colo=Math.floor((255/scalawidth*(x-scalaleft)))
    var hexacolo=makeHexa(colo)
    obj.pixelLeft=x-7
    obj.pixelTop=selectedObj.posTop
    if (imgObj.parentElement.id=="spanschienebuttonred") {
        hexared=hexacolo
        document.colorwizard.rgbred.value=colo
        hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))
        hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value))
    }
    if (imgObj.parentElement.id=="spanschienebuttongreen") {
        hexagreen=hexacolo
        document.colorwizard.rgbgreen.value=colo
        hexared=makeHexa(parseInt(document.colorwizard.rgbred.value))
        hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value))
    }
    if (imgObj.parentElement.id=="spanschienebuttonblue") {
        hexablue=hexacolo
        document.colorwizard.rgbblue.value=colo
        hexared=makeHexa(parseInt(document.colorwizard.rgbred.value))
        hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))
    }
    hexa="#"+hexared+hexagreen+hexablue
    if (coloridshort=="displaycolorFG") {
        document.all.displaycolorFG.style.backgroundColor=hexa
        document.all.testdiv.style.color=hexa
        strkcolor=hexa
    }
    else if (coloridshort=="displaycolorBG") {
        document.all.displaycolorBG.style.backgroundColor=hexa
        document.all.testdiv.style.backgroundColor=hexa
        strkweight=hexa
    }
    document.colorwizard.hexafield.value=hexa
}

function setSelectedElem(evt) {
    imgObj = window.event.srcElement
    if (imgObj.parentElement.id.indexOf("schienebutton") != -1) {
        selectedObj = imgObj.parentElement.style
        setZIndex(selectedObj,100)
        return
     }
      selectedObj=null
    return
}

function dragIt(evt) {
    if (selectedObj) {
        shiftTo(selectedObj, (window.event.clientX-offsetX-document.all.colorwizarddiv.style.posLeft), (window.event.clientY - offsetY))
    return false
     }
}

function engage(evt) {
    setSelectedElem(evt)
    if (selectedObj) {
        offsetX = window.event.offsetX
        offsetY = window.event.offsetY
     }
    return false
}

function release(evt) {
    if (selectedObj) {
        setZIndex(selectedObj, 0)
        selectedObj = null
    }
}

function translateintorgb() {
    var hexanew=document.colorwizard.hexafield.value
    if (hexanew.indexOf("#") == -1) {
        hexanew="#"+hexanew
        document.colorwizard.hexafield.value=hexanew
    }
    var hexanewred=hexanew.substring(1,3)
    var hexanewgreen=hexanew.substring(3,5)
    var hexanewblue=hexanew.substring(5,7)
    document.colorwizard.rgbred.value=parseInt("0x"+hexanewred)
    document.colorwizard.rgbgreen.value=parseInt("0x"+hexanewgreen)
    document.colorwizard.rgbblue.value=parseInt("0x"+hexanewblue)
    document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3
    document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3
    document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3
    if (coloridshort=="displaycolorFG") {
        document.all.displaycolorFG.style.backgroundColor=hexanew
        document.all.testdiv.style.color=hexanew
        strkcolor=hexanew
    }
    else if (coloridshort=="displaycolorBG") {
        document.all.displaycolorBG.style.backgroundColor=hexanew
        document.all.testdiv.style.backgroundColor=hexanew
        strkweight=hexanew
    }
}

function translateintohexa() {
    if (document.colorwizard.rgbred.value>255) {document.colorwizard.rgbred.value=255}
    if (document.colorwizard.rgbgreen.value>255) {document.colorwizard.rgbgreen.value=255}
    if (document.colorwizard.rgbblue.value>255) {document.colorwizard.rgbblue.value=255}
    var hexanewred=makeHexa(parseInt(document.colorwizard.rgbred.value))
    var hexanewgreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))
    var hexanewblue=makeHexa(parseInt(document.colorwizard.rgbblue.value))
    var hexanew="#"+hexanewred+hexanewgreen+hexanewblue
    document.colorwizard.hexafield.value="#"+hexanewred+hexanewgreen+hexanewblue
    document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3
    document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3
    document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3
    if (coloridshort=="displaycolorFG") {
        document.all.displaycolorFG.style.backgroundColor=hexanew
        document.all.testdiv.style.color=hexanew
        strkcolor=hexanew
    }
    else if (coloridshort=="displaycolorBG") {
        document.all.testdiv.style.backgroundColor=hexanew
        strkweight=hexanew
    }
}

function launchcolorwizard(whatid) {
    coloridshort=whatid
    colorid=eval("document.all."+whatid+".style")
    document.colorwizard.hexafield.value=colorid.backgroundColor
    translateintorgb()
}

function initcolorpicker() {
    document.all.colorwizarddiv.style.posLeft=DL_GetElementLeft(document.all.marker);
    document.all.colorwizarddiv.style.posTop=DL_GetElementTop(document.all.marker);
    document.all.colorwizarddiv.style.visibility="visible"
    document.onmousedown=engage
    document.onmousemove=dragIt
    document.onmouseup=release
}

function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          
    var eParElement = eElement.offsetParent;    
    while (eParElement != null) {                                            
        nLeftPos += eParElement.offsetLeft;      
        eParElement = eParElement.offsetParent;  
    }
    return nLeftPos;                            
}

function DL_GetElementTop(eElement) {
    var nTopPos = eElement.offsetTop;            
    var eParElement = eElement.offsetParent;    
    while (eParElement != null) {                                            
        nTopPos += eParElement.offsetTop;        
        eParElement = eParElement.offsetParent;  
    }
    return nTopPos;                              
}
if (IE) {
    window.onload=initcolorpicker
}
else {
    alert("Color-Picker requires Internet Explorer 5x/6x")
}

      </SCRIPT>


<script>
if (IE) {
document.write('<form name="colorwizard">')
document.write('<div id="marker" style="position:relative;overflow:hidden;width:310px;height:92px"></div>')
document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:350px;height:92px;border-style:solid;border-color:#666666;border-width:1px;background-color:#dddddd">')
}
else {
document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:0px;height:0px;">')
}
      </script>

<span id="spanschienered" style="position:absolute;top:8px;left:3px;background-color:#FF0000;width:255px;height:5px">
<img src="images/cuadro3.gif" width="1" height="1"></span>
<span id="spanschienebuttonred" style="position:absolute;top:5px;left:3px;background-color:#444444;border:1px solid black;">
<IMG NAME="schienebuttonred" SRC="images/cuadro3.gif" width=12 height=12></span>

<span id="spanschienegreen" style="position:absolute;top:25px;left:3px;background-color:#00ff00;width:255px;height:5px">
<img src="images/cuadro3.gif" width="1" height="1"></span>
<span id="spanschienebuttongreen" style="position:absolute;top:22px;left:3px;background-color:#444444;border:1px solid black;">
<IMG NAME="schienebuttongreen" SRC="images/cuadro3.gif" width=12 height=12></span>

<span id="spanschieneblue" style="position:absolute;top:42px;left:3px;background-color:#0000FF;width:255px;height:5px">
<img src="images/cuadro3.gif" width="1" height="1"></span>
<span id="spanschienebuttonblue" style="position:absolute;top:39px;left:3px;background-color:#444444;border:1px solid black;">
<IMG NAME="schienebuttonblue" SRC="images/cuadro3.gif" width=12 height=12></span>

<div id="displayrgbfield" style="position:absolute;top:55px;left:3px;background-color:#CCCCCC;border:1px solid black">
<table cellpadding=2 cellspacing=0>

<tr><td align=right>
<table cellpadding=0 cellspacing=0>

<tr><td align=right>
<font size=1 face=Arial>  R </font>
</td>
<td>
<input type="text" name="rgbred" size=1  value=0 style="font-size:7pt;color:black;font-family:Arial;">
</td>
<td>
</td>
<td align=right>
<font size=1 face=Arial>  G </font>
</td>
<td>
<input type="text" name="rgbgreen" size=1  value=0 style="font-size:7pt;color:black;font-family:Arial;">
</td><td align=right>
<font size=1 face=Arial>  B </font>
</td>
<td>
<input type="text" name="rgbblue" size=1  value=0 style="font-size:7pt;color:black;font-family:Arial;">
</td>
<td colspan=2 align=center>
<input type="button" size=1  value="go" onClick="translateintohexa()" style="font-size:8pt;color:black;font-family:Arial;">
</td>
</tr>
</table>
</td></tr>
</table>
</div>

<div id="displayhexafield" style="position:absolute;top:55px;left:200px;background-color:#CCCCCC;border:1px solid black">
<table cellpadding=2 cellspacing=0>

<tr><td align=right>
<table cellpadding=0 cellspacing=0>

<tr><td align=right>

</td>
<td>
<input type="text" name="hexafield" size=10  value="#000000" style="font-size:8pt;color:#000000;font-family:Verdana;">
</td>
<td>
</td>
<td align=center>
<input type="button" size=1  value="go" onClick="translateintorgb()" style="font-size:8pt;color:black;font-family:Arial;">
</td></tr>
</table>
</td></tr>
</table>
</div>
      <p>
<span id="displaycolorBG" style="position:absolute;top:16;left:285;width:16px;height:16px;border:1px solid black;background-color:#FF0000"><a href="javascript:launchcolorwizard('displaycolorBG')">
<img src="images/cuadro3.gif" width=16 height=16 border=0></a></span>
<span id="displaycolorFG" style="position:absolute;top:7px;left:276px;width:16px;height:16px;border:1px solid black;background-color:#000000;"><a href="javascript:launchcolorwizard('displaycolorFG')">
<img src="images/cuadro3.gif" width=16 height=16 border=0></a></span>
</div>
<br>
<script>
if (IE) {
    document.write('<div id="testdiv" style="position:relative;visibility:visible;width:350px;border-style:solid;border-color:#666666;border-width:1px;background-color:#FF0000;font-family:Verdana;font-size:16pt;color:#000000;padding:5px">')
    document.write('www.nopagohost.com y www.mundoairlines.net te ayudan')
    document.write('</div>')
    document.write('</form>')
}
      </script>
      </p>
<p> </p>
</td>
    </tr>
  </table>
                                              </center>
                                            </div>



Partes modificables de este código:

- La imagen que forman todos los recuadros de este ejemplo es esta:

images/cuadro3.gif  =   guárdala en una carpeta que se llame images o deberás de modificar en todo el código la ruta de dicha imagen.

Realmente esta imagen es más pequeña y le hemos puesto color al borde para que se pueda ver pero no lo tiene...recuérdalo.

- En esta línea del código podrás modificar el texto de ejemplo:

document.write(' www.nopagohost.com y www.mundoairlines.net te ayudan')


Os recomiendo que lo probeis, os saldran dos cuadros, uno para el background y el otro para el texto, seleccionar uno u otro y ya vereis





_________________________________
Mundo
Comunidad Mundo Aviacion
Fundador VA Mundo Airlines
www.mundoairlines.net

"No os tomeis la vida demasiado en serio; de todas maneras, no saldreis vivos de esta"
- Bernard de Fontanelle
#1   12 Sep 2008 14:58
Desconectado MSN Messenger Skype Ver perfil del usuario Enviar Mensaje Privado Visitar sitio Web del Usuario
Descargar Mensaje Volver arriba Página Inferior
Sponsor
Mostrar mensajes anteriores:   
Ocultar¿Este tema fue útil?
Compartir este tema
blinkslist.com blogmarks.net co.mments.com del.icio.us digg.com newsvine.com facebook.com fark.com feedmelinks.com furl.net google.com linkagogo.com ma.gnolia.com meneame.net netscape.com reddit.com shadows.com simpy.com slashdot.org smarking.com spurl.net stumbleupon.com technorati.com favorites.live.com yahoo.com DIGG ITA Fai Informazione KiPapa Ok Notizie Segnalo

Publicar Nuevo Tema  El tema está bloqueado: no pueden editarse ni agregar mensajes.  Página 1 de 1
 

Portal » Foro » Diseño Web y Foros » Biblioteca del webmaster » Generador Color De Texto Y De Fondo

Fecha y hora actual: Miércoles, 07 Enero 2009, 18:05 | Todas las horas están en UTC + 1 Hora
Ver Tema Anterior Habilitar Biblioteca Descargar Tema Version Imprimible Enviar un correo a un amigo Ver Siguiente Tema

Usuarios navegando en este Tema: 0 Registrados, 0 Ocultos y 0 Invitados
Usuarios Registrados conectados: Ninguno
 
Lista de Permisos
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas
No puede adjuntar archivos
No Puede descargar archivos
Puede enviar eventos al Calendario


  



 
JanuWeb.Com  Destaca

JanuWeb.Com • JanuWeb.Org • JanuBlog.Com están alojadas en Sotem.es • © 2006, 2008
MuchoGrafico - Paz y Justicia - phpBB-Es - Icy Phoenix España - Ciber Morph - Lphant - EDDB - CoMuNiDaD ThE KuKa
RYLNet - phpBBMODs.Es - ZonaManolo - Directorio phpBB-Es - ModMovil - AyudaPC - Mas Pi - Madelman