Finestra amb imatges i text

 

 

 

Aquest script té tantes opcions que poreu configurar que vos he posta l'explicació del que es pot canviar devora cada variable, dins l'script mateix. El poreu copiar tal cual (explicacions i tot mentres respecteu les "//") i aferrar-lo on s'explica. l'efecte el teniu a la vista.

POSAU AIXÒ DINS <HEAD>

<script>
<!-- Començament del JavaScript -
// CONFIGURACIÓ:

// Configura les variables del primer bolc de l'script.
// El segon bloc de l'script (dins el tag Body) no necessita configuració.

// Edita els teus missatges, en pots afegir tants com vulguis.


var message = new Array()
message[0]="Pots posar tot un combinat din aquesta finestra, fotos, text... el que vulguis."
message[1]="El tamany de la imatge pot ser el que vulguis, redimensiona la finestra canviant el valor de les variants."
message[2]="Cada finestra pot tenir un hipervincle. Si no vols que servesqui per link, mira l'explicació de la variable."

// Aqui hi van els links dels teus missatges. Asseguret que configures tants de links com missatges has creat.
// Si vols que algun missatge no dugui links escriu "#" en lloc de la url (mira el darrer exemple).
var messageurl = new Array()
messageurl[0]="http://www.portula.net"
messageurl[1]="http://usuarios.tripod.es/mimut/"
messageurl[2]="#"

// Les imatges que acompanyen els teus missatges.
var messageimg = new Array()
messageimg[0]="foto1.jpg"
messageimg[1]="foto2.jpg"
messageimg[2]="foto3.jpg"

// Alineació de cada imatge en relació al text (dreta o esquerra)
var alignimg=new Array()
alignimg[0]="right"
alignimg[1]="left"
alignimg[2]="right"

// Alineació del text en relació a la caixa de text (finestra)
var alignmessage=new Array()
alignmessage[0]="right"
alignmessage[1]="left"
alignmessage[2]="left"

// Destí de la nova pàgina (target)
var target_url="_blank"

// Aqui es configura l'amplària de la finestra
var textwidth=275

// I aqui l'altura
var textheight=200

// Aqui pots llevar o posar vora a la finestra i especificar el gruix
var borderwidth=1

// El tamanys de la font fonts
var font_size=1

// El tipus de font
var font_face="Verdana"

// El color de la font
var font_color="black"

// El color de fons de la finestra
var bg_ticker="00CCFF"

// Controla la distància del marge esquerra de la finestra del navegador
var x_finalpos=50

// Controla la distància de la part superior de la finestra del navegador
var y_finalpos=20

// Número de làmines de la persiana.
var x_slices=12

// Pausa entre els missatges (milisegons)
var pause=5000

// A partis d'aqui ja no canviis res més
var imgpreload=new Array()
for (i=0;i<=messageimg.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=messageimg[i]
}
var i_loop=0
var i_message=0
var width_slice=Math.ceil(textwidth/x_slices)
var cliptop=0
var clipbottom=textheight
var i_clipright=1
var content=""

function initiate() {
content+="<table border="+borderwidth+" cellpadding='5' width="+textwidth+" height="+textheight+">"
content+="<tr><td bgcolor="+bg_ticker+" align="+alignmessage[i_message]+">"
content+="<img hspace=5 src="+messageimg[i_message]+" align="+alignimg[i_message]+" border='0'>"
content+="<a href="+message[i_message]+" target="+target_url+">"
content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
content+=message[i_message]
content+="</font></a></td></tr></table>"
if (document.all) {
for (i=0;i<=x_slices;i++) {
var thisinners=eval("s"+i)
thisinners.innerHTML=content
var thiss=eval("document.all.s"+i+".style")
thiss.posLeft=x_finalpos
thiss.posTop=y_finalpos
}
i_message++
openlamellar()
}
if (document.layers) {
for (i=0;i<=x_slices;i++) {
var thisinners=eval("document.s"+i+".document")
thisinners.write(content)
thisinners.close()
var thiss=eval("document.s"+i)
thiss.left=x_finalpos
thiss.top=y_finalpos
}
i_message++
openlamellarNN()
}
}

function openlamellar() {
clipleft=-width_slice
clipright=0
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.all.s"+i+".style")
thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright++
var timer=setTimeout("openlamellar()",20) //controla la velocitat d'obertura de la cortina
}
else {
clearTimeout(timer)
var timer=setTimeout("closelamellar()",5000) //controla el temps en que queda visible la finestra
}
}

function openlamellarNN() {
clipleft=-width_slice
clipright=0
if (i_clipright<=width_slice) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.s"+i)
thiss.clip.left=clipleft
thiss.clip.right=clipright
thiss.clip.top=cliptop
thiss.clip.bottom=clipbottom
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright++
var timer=setTimeout("openlamellarNN()",20)
}
else {
clearTimeout(timer)
var timer=setTimeout("closelamellarNN()",2000)
}
}

function closelamellar() {
clipleft=-width_slice
clipright=0
if (i_clipright>=0) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.all.s"+i+".style")
thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright--
var timer=setTimeout("closelamellar()",20)

}
else {
clearTimeout(timer)
var timer=setTimeout("changeimage()",2000)
}
}

function closelamellarNN() {
clipleft=-width_slice
clipright=0
if (i_clipright>=0) {
for (i=0;i<=x_slices;i++) {
var thiss=eval("document.s"+i)
thiss.clip.left=clipleft
thiss.clip.right=clipright
thiss.clip.top=cliptop
thiss.clip.bottom=clipbottom
clipleft+=width_slice
clipright=clipleft+i_clipright
}
i_clipright--
var timer=setTimeout("closelamellarNN()",20)

}
else {
clearTimeout(timer)
var timer=setTimeout("changeimageNN()",2000)
}
}

function changeimage() {
content=""
if (i_message>message.length-1) {i_message=0}
content+="<table border="+borderwidth+" cellpadding='5' width="+textwidth+" height="+textheight+">"
content+="<tr><td bgcolor="+bg_ticker+" align="+alignmessage[i_message]+">"
content+="<img hspace=5 src="+messageimg[i_message]+" align="+alignimg[i_message]+" border='0'>"
content+="<a href="+message[i_message]+" target="+target_url+">"
content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
content+=message[i_message]
content+="</font></a></td></tr></table>"
for (i=0;i<=x_slices;i++) {
var thisinners=eval("s"+i)
thisinners.innerHTML=content
}
i_message++
openlamellar()
}

function changeimageNN() {
content=""
if (i_message>message.length-1) {i_message=0}
content+="<table border="+borderwidth+" cellpadding='5' width="+textwidth+" height="+textheight+">"
content+="<tr><td bgcolor="+bg_ticker+" align="+alignmessage[i_message]+">"
content+="<img hspace=5 src="+messageimg[i_message]+" align="+alignimg[i_message]+" border='0'>"
content+="<a href="+message[i_message]+" target="+target_url+">"
content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
content+=message[i_message]
content+="</font></a></td></tr></table>"
for (i=0;i<=x_slices;i++) {
var thisinners=eval("document.s"+i+".document")
thisinners.write(content)
thisinners.close()
}
i_message++
openlamellarNN()
}

// - Fi del JavaScript - -->
</script>
<style>
.s {
position:absolute;
left:-5000px;
topt:-5000px;
}
A {
text-decoration:none;
}

</style>

FINS AQUI VA DINS <HEAD> (Tot això de vermell no ho copiis)

El tag body ha de quedar així: (el color del fons i del text pot posar el que vulguis)

<body bgcolor="#FFFFFF" text="#000000" onLoad="initiate()">

Dins el Body hi poses aquest altra script:

<script>
<!-- Començament del JavaScript (aqui no canviis res)-
for (i=0;i<=x_slices;i++) {
document.write("<span id='s"+i+"' class='s'></span>")
}
// - Final del JavaScript - -->
</script>

Copia el codi del primer script entre els tags <head> i </head> i lo següent on s'indica. Fitzet que pots afegir tantes frasses com vulguis, però has de tenir en compte que hi ha d'haver el mateix número d'opcions per cada variable; per exemple no pots tenir 4 imatges en la variable var messageimg = new Array() i a les altres com var alignmessage=new Array() haver-hi només 3 opcions d'alineació.

Tornar