Portal    Foro    Buscar    FAQ    Registrarse    Conectarse

OcultarConectarse
 Nombre de usuario:    Contraseña:      Conectarme automáticamente en cada visita    
 

Portal » Foro » Diseño Web y Foros » Biblioteca del webmaster

Fecha y hora actual: Jueves, 09 Febrero 2012, 12:32 • Todas las horas son UTC + 1 hora
Ver tema anterior Temas recientes Habilitar biblioteca Descargar tema Versión imprimible Correo a un amigo Ver siguiente tema

Generador Color De Texto Y De Fondo


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
Primate
avatar
DesconectadoMSN MessengerSkype
Registrado: Septiembre 2008
Mensajes: 96
Ubicación: LEMG
 
 
Responder citando Descargar mensaje
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.org

"No os tomeis la vida demasiado en serio; de todas maneras, no saldreis vivos de esta"
- Bernard de Fontanelle
 
#1  Viernes, 12 Septiembre 2008, 14:58
Ver perfil del usuarioEnviar mensaje privadoVisitar sitio web del usuario 
Volver arribaPágina inferior
Patrocinadores
Mostrar mensajes anteriores:   
 

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

Fecha y hora actual: Jueves, 09 Febrero 2012, 12:32 • Todas las horas son UTC + 1 hora
Ver tema anterior Temas recientes Habilitar biblioteca Descargar tema Versión imprimible Correo a un amigo Ver siguiente tema

Usuarios navegando en este tema: 0 registrados, 0 ocultos y 1 invitado
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 publicar eventos en el calendario


  


 

JanuWeb.Com • JanuWeb.Org • JanuBlog.Com están alojadas en Sotem.es • © 2006, 2010