efectos de texto

santiagopernas · #1 (**permalink**) 20/01/2003, 07:30

Alguien sabe como se puede hacer que un texto con efectos de color sea al mismo tiempo un link?

KarlanKas · #2 (**permalink**) 20/01/2003, 08:28

Bienvenido santiagopernas!!

Pues como no te expliques un poco más te digo que metiéndolo entre <A HREF="dirección.html">[texto con efectos de color]</A>

Anda, mándanos el código del efecto y verás como te ayudamos!

Y perdona por la broma!

santiagopernas · #3 (**permalink**) 21/01/2003, 01:33

Es verdad¡¡¡ como no se me habia ocurrido antes

(ja,ja)
Bromas aparte, te envio el codigo, conozco algo javascript, (lo basico soy un novato), no se como puedo usar este efecto para que sieva de link:GRACIAS
<HTML>

<HEAD>

</HEAD>

<BODY bgcolor="#FFFFFF">
<br>
<h2>
<script language="JavaScript1.2">

var message="Ali Almossawi's CyberiaPC.com!"
var neonbasecolor="NAVY"
var neontextcolor="RED"
var flashspeed=1 //in milliseconds

var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight">'+message.charAt(m)+'</span>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",50)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h2>

</BODY>

</HTML>

KarlanKas · #4 (**permalink**) 21/01/2003, 02:39

Aquí tienes una propuesta!

Ahora no puedo probarlo en NS, pero dime tú si va. En IE 6.0 va muy bien. He creado la variable destino en la que pones la dirección a la que apunta el enlace.

Un saludo!!

<HTML>

<HEAD>

</HEAD>

<BODY bgcolor="#FFFFFF">
<br>
<h2>
<script language="JavaScript1.2">
var destino="http://www.forosdelweb.com";
var message="Ali Almossawi's CyberiaPC.com!"
var neonbasecolor="NAVY"
var neontextcolor="RED"
var flashspeed=1 //in milliseconds

var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<a id="neonlight" href="'+destino+'">'+message.charAt(m)+'</a>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",50)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h2>

</BODY>

</HTML>

santiagopernas · #5 (**permalink**) 21/01/2003, 03:06

garcias
la pruebo a ver si va y te constesto
gracias de nuevo

santiagopernas · #6 (**permalink**) 21/01/2003, 03:26

funciona de pm
en ns no va he probado en el 6.0
ya vere como lo arreglo
gracias de nuevo
el novato

KarlanKas · #7 (**permalink**) 21/01/2003, 03:36

Me alegro de uqe funcione de Perfecto Modo

Voy a descargarme el NS y pruebo a ver...

Un saludo!

KarlanKas · #8 (**permalink**) 21/01/2003, 04:03

Por lo pronto con esta modificación es un enlace en NS... es que por lo que veo el script está concebido para que funcione solo en IE... por lo menos su efecto...

Dime si te sirve el cambio..

<HTML>

<HEAD>

</HEAD>

<BODY bgcolor="#FFFFFF">
<br>
<h2>
<script language="JavaScript1.2">
var destino="http://www.forosdelweb.com";
var message="Ali Almossawi's CyberiaPC.com!"
var neonbasecolor="NAVY"
var neontextcolor="RED"
var flashspeed=1 //in milliseconds

var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<a id="neonlight" href="'+destino+'">'+message.charAt(m)+'</a>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(<a id="neonlight" href="'+destino+'">'+message+'</a>')

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",50)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h2>

</BODY>

</HTML>

santiagopernas · #9 (**permalink**) 21/01/2003, 04:17

ns siempre da problemas con javascript, no va

no se porqué. no es la primera vez que me ocurre con NS

KarlanKas · #10 (**permalink**) 21/01/2003, 04:30

Estaba mal... prueba ahora!

<HTML>

<HEAD>

</HEAD>

<BODY bgcolor="#FFFFFF">
<br>
<h2>
<script language="JavaScript1.2">
var destino="http://www.forosdelweb.com";
var message="Ali Almossawi's CyberiaPC.com!"
var neonbasecolor="NAVY"
var neontextcolor="RED"
var flashspeed=1 //in milliseconds

var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<a id="neonlight" href="'+destino+'">'+message.charAt(m)+'</a>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write('<a id="neonlight" href="'+destino+'">'+message+'</a>')

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",50)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h2>

</BODY>

</HTML>

santiagopernas · #11 (**permalink**) 21/01/2003, 04:59

ya aparece el link en NS pero si en efecto de color. Esto es con el 6.0 no se si con la nueva funcionara, no la tengo instalda. En mi caso no tengo muchas visitas de la pagina con NS . De momento creo que asi servira, de todasformas seguiremos en ello
GRacias

KarlanKas · #12 (**permalink**) 21/01/2003, 05:33

[FONT=courier new]santiagopernas!!

El efecto originariamente no estaba pensado para NS... ya que usa un discriminador para que sólo se ejecute con IE (if (document.all){). Pero podríamos intentar hacerlo compatible...

santiagopernas · #13 (**permalink**) 21/01/2003, 06:04

estaria muy bien.A pesar de los pocos visitantes que tenemos en nuestra pagina con NS, debemos cubrir todas posibilidades. Pero tampoco queria molestarte mucho tiempo

KarlanKas · #14 (**permalink**) 22/01/2003, 01:54

alsapa!

Mira, prueba a poner esto en el HEAD

h1.grande{font:bold 20px/30px; }

Y luego cuando llames al H1 y lo quieras más grande pon:

<H1 class="grande">HOLA</h1>

También puedes poner:
<font size=7>HOLA</font>

Espero que te ayude... si te explicas un poco más lo podemos ajustar un poco más.

caricatos · #15 (**permalink**) 22/01/2003, 01:56

Hola a todos:

Respuesta a alsapa:

Si bien hay un atributo size para la etiqueta font...
Si se dan los tamaños con estilos se logra mayor presición (lo aprendí con las postalitas)

Prueba este trocito de código:
<font size=250>Hola</font><br>
<font style="font-size:250">Hola</font>

Saludos

KarlanKas · #16 (**permalink**) 22/01/2003, 01:58

Hola caricatos!!! Paseando por los foros, eh?

Un abrazo!

KarlanKas · #17 (**permalink**) 22/01/2003, 03:05

A ver si esto te sirve...

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF">
<br>
<h2>
<script language="JavaScript1.2">
var destino="http://www.forosdelweb.com";
var message="Ali Almossawi's CyberiaPC.com!"
var neonbasecolor="NAVY"
var neontextcolor="RED"
var flashspeed=1 //in milliseconds
var tamano=50;//En pixels

var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<a style="font-size='+tamano+'px" id="neonlight" href="'+destino+'">'+message.charAt(m)+'</a>')
document.write('</font>')

//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write('<a id="neonlight" href="'+destino+'">'+message+'</a>')

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor;

}

//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor

if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",50)
return
}
}

function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h2>

</BODY>

</HTML>

Modifica el tamaño con la variable tamano.

Salu2!!

santiagopernas · #18 (**permalink**) 22/01/2003, 03:24

si cambias:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFFF">
<br>
<h1>

puede servir??
aunque supongo que
la solucion de karlankas sera mas correcta

KarlanKas · #19 (**permalink**) 22/01/2003, 03:45

[FONT=courier new]santiagopernas!!

Tienes razón, lo más correcto es lo que pones tú o quitar ese <H2> que con mi solución no pinta nada. Pero creo que alsapa quería la letra más grande que <H1> por lo que habría que seguir mi solución.

Un saludooo...

darknight202 · #20 (**permalink**) 22/01/2003, 04:10

Hola a todos:

Este es mi primer mensaje en el foro, y la cuestión es que yo de JavaScript voy bastante pez, soy programador de PHP, pero cuando me meto en el lado del Cliente, pues no me sale nada.

No me andaré con rodeos, me bajé el siguiente Script de MundoJavaScript no consigo que me funcione, la verdad es que lo necesito, pues tengo la página acabada a falta de este efecto de Frases en Diagonal, que mi cliente me exige, y que no encuentro la forma de hacerlo correr, gracias por la ayuda.

Esto va entre <head> y </head>:


<SCRIPT language=JavaScript>

// script trouvé sur http://www.sitecrea.fr.st tout pour votre site
// le réalisateur :
// CREDITS:
// First diagonal textscroller worldwide by Urs Dudli and Peter Gehrig
// Copyright (c) 1999 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.ch.
// [email protected]
// 1/4/2000

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.24fun.ch on the webpage
// where First diagonal textscroller worldwide will be running.

if (document.layers) {
alert("Explorer seulement")
}
//vous mettez ci-dessous tout les textes que vous voulez (en rajoutant un nombre après "message [")
var message = new Array()
message[0]="AQUI VA UNA FRASE"
message[1]="UN SEGUNDO TEXTO AQUI"
message[2]="PUEDES CONTINUAR"
message[3]="INSERTANDO MAS FRASES"
message[4]="SON ILIMITADAS"
message[5]="SI UTILIZAS ESTE SCRIPT"
message[6]="NO OLVIDES"
message[7]="PONER UN LINK"
message[8]="A MUNDOJAVASCRIPT.COM"
message[9]="EN TU WEB"
message[10]="TE LO AGRADECERIAMOS MUCHO"
message[11]="GRACIAS POR TU VISITA"
message[12]="VUELVE A VISITARNOS"
message[13]="MUCHAS GRACIAS"

var i_message=0

var scrollerheight=250
var scrollerwidth=400

var startheight=0

var font_size=25
var font_family="Times"

var timer

function initiate() {
document.all.rotationstyle.style.posLeft=-(Math.floor(scrollerwidth/2))+font_size
document.all.rotationstyle.style.posTop=startheigh t
startscroll()
}

function startscroll() {
if (document.all) {
do_rotate="yes"
rotationstyle.filters[0].apply()
rotationstyle.innerHTML=
'<OBJECT ID="rotationobj" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px ;height:'+2*scrollerheight+'px">'+
'<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
'<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">'+
'<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,0)">'+
'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
'<PARAM NAME="Line0005" VALUE="Text(\''+message[i_message]+'\', 0, 0, 0)">'+
'</OBJECT>'
rotationstyle.filters[0].play()
rotationobj.Rotate(0,0,-45)

i_message++
if (i_message>=message.length) {i_message=0}
timer=setTimeout("startscroll()",4000)
}
}

function stopscroll() {
do_rotate="no"
}

// - End of JavaScript - -->
</SCRIPT>

Esto entre <body> y </body>:

<SPAN id=rotationstyle
style="FILTER: revealTrans(Transition=3, Duration=2); LEFT: -2000px; POSITION: absolute">
<OBJECT classid=CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6
id=rotationobj></OBJECT></SPAN>

Y esta es mi linea body:

<body bgcolor="#676136"style="font-family: Verdana; color: #003048; font-weight: bold; font-size: 10 pt" onload=initiate()>

En el Script habla de un enlace a poner o algo así, pero la verdad no entiendo o dónde ponerlo, o que hacer, ¿Que me falta?. Gracias.

santiagopernas · #21 (**permalink**) 22/01/2003, 04:41

yo tb estoy un poco pez, pero te mando en efecto parecido a ver si te vale:

<html>
<head>

<style type="text/css">

#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;

}

</style>
</head>

<body>

<script language="JavaScript1.2">

// Script Original: Lloyd Hassell's

// Mensaje
var thecontent='<h2><font color="#0000FF">Depósito de JavaScripts!</font></h2>'
// Tiempo de animación en milisegundos ('' = infinito)
var hidetimer=7000;
// Velocidad
var BallSpeed = 10;

var contentWidth;
var contentHeight;
var maxBallSpeed = 50;

var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("supertext").style.visibility = "visible";
contentWidth=supertext.offsetWidth
contentHeight=supertext.offsetHeight
}
else if (document.layers) {
xMax = window.innerWidth;
yMax = window.innerHeight;
contentWidth=document.supertext.document.width
contentHeight=document.supertext.document.height
document.layers["supertext"].visibility = "show";
}
setTimeout('moveBall()',400);
if (hidetimer!='')
setTimeout("hidetext()",hidetimer)
}

function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("supertext").style.left = xPos + document.body.scrollLeft;
document.all("supertext").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["supertext"].left = xPos + pageXOffset;
document.layers["supertext"].top = yPos + pageYOffset;
}
animatetext=setTimeout('moveBall()',20);
}
}

function calculatePosition() {
if (xDir == "right") {
if (xPos > (xMax - contentWidth - BallSpeed)) {
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - contentHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}

function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(animatetext)
}

if (document.all||document.layers){
document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}

</script>

</body>
</html>

darknight202 · #22 (**permalink**) 22/01/2003, 06:28

Bueno, primera duda resuelta, gracias a todos, y gracias santiago pernas, lo que has mandado no era exactamente lo que necesitaba pero lo he guardado para usarlo en otro sitio (reutilización de código :) )

Por cierto el fallo era mio, no del codigo JavaScript, asi que si quereís usarlo funciona perfectamente y el efecto está muy logrado..., aunque me podeís decir como puedo cambiar el color del texto, me gustaría que apareciera en rojo.

Gracias.

santiagopernas · #23 (**permalink**) 23/01/2003, 04:39

He probado el codigo que has puedsto en el foro y no me funciona

darknight202 · #24 (**permalink**) 23/01/2003, 04:53

Veamos, has puesto cada parte entre las etiquetas correspondientes? Eso es lo má importante, también influye que no tengas otro JavaScript por ahí ejecutandose a la vez, o sólo te cojerá el primero que encuentre, me explico, si ponemos el código que tú mandaste primero y el mio después en el mismo Script, pues sólo se ejecutará el tuyo. Entendido?

A mi si que me funciona tal como está, solo se me ocurre pensar que lo hayas copiado entero tal cual, sin quitar las lineas que obviamente no son de código, echale otro vistazo, será un error simple espero.

Saludos.