Javascript dans bannière sur le forum Informatique - 07-03-2008 23:26:37

Liste des sujets

Javascript dans bannière

zv3nd

Niveau 6

07 mars 2008 à 23:26:37

Bonjour à tous, voila je souhaite mettre un texte defilant dans une bannière. Problème: en position absolue, le début du script apparait en plein milieu de la bannière. J'ai beau modifier toutes les marges, cela reste comme marge de référence le milieu du site. Une marge invisible...

Je ne peux vous donner l'adresse le site n'est pas encore hebergé. Merci de vos réponses.

Artie-Ziff

Niveau 6

07 mars 2008 à 23:27:41

Tu peux faire un copier-coller du CSS dans l'intégralité et de la partie HTML concernée ?

zv3nd

Niveau 6

07 mars 2008 à 23:35:30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">

<head>

<!--[if lte IE 6]>
<style type="text/css">

menu {

position: absolute;
top:
expression(documentElement.scrollTop+body.scrollTo
p+60);
left:
expression(documentElement.scrollLeft+body.scrollL
eft+60);
}
body {
background: url(null) fixed;
}
</style>
<![endif]-->

<TITLE>Gen-Erik : Le site d'Eric VERMET</TITLE>

</head>

<body>

<SCRIPT>
// Vos messages
var text=new Array()
text[0]="Eric VERMET acteur de complément (Silhouette/Figurant)"
text[1]=""
// un lien par message
var textlink=new Array()

textlink[1]="http://www.24fun.com/downloadcenter/t
extanimatordemo/index.html"

textlink[2]="http://www.24fun.com/downloadcenter/s
lideshowdemo/index.html"

textlink[3]="http://www.24fun.com/downloadcenter/t
extanimatordemo/index.html"
// Destination "_blank", "_self", "_top", "_parent"
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_blank"
texttarget[2]="_blank"
// police
var textfont="Verdana"
// couleurs
var textfontcoloraa="black";var textfontcolorbb="black"
// couleur mouseover
var textfontcolorrollover="yellow"
// taille
var textfontsize=45
// couleur arrière-plan
var textbgcolor="white"
// "bold" ou "normal"
var textweight="bold"
// "italic" ou "normal"
var textitalic="normal"
// dimensions
var textwidth=478;var textheight=70
// couleur bordure
var textbordercolor="#888888"
// largeur bordure
var textborder=3
// largeur zones transparentes
var translayerszone=50

// Plus de modifs ci-dessous
var textpause=0
var textitalicA="";var textitalicB=""
var textweightA="<b>";var textweightB="</b>"
var textdecoration="none"
var textalignonly="center"
var textfontsizeHTML=3
var i_text=0
var textcontent=""
var thisspan=""
var content="";var contentbg=""
var toggle=1
var timer
var scrollready=true
var tablewidth;var tableheight
var textfontcolortoggle=new Array()
var toggle=1
var step=2;
var content
var padding=3
var textcontentheight;var textcontentwidth
var translayerswidth=4
var
translayersmax=Math.floor(translayerszone/translay
erswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var
translayerswidthall=translayersmax*translayerswidt
h
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var ns4=document.layers?1:0
var browserinfos=navigator.userAgent
var opera=browserinfos.match(/Opera/)

getcontent()
function getcontent() {
if (ie || ns6) {
tablewidth=textwidth-2*textborder
tableheight=textheight-2*textborder
content="<table width="+tablewidth+" height="+tableheight+" cellpadding=3 cellspacing=0 border=0><tr valign=middle><td><nobr>"
for (i=0;i<text.length;i++) {
if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa}
else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb}
toggle*=-1
content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\"
style=\"position:relative;font-family:\'"+textfont
+"\';font-size:"+textfontsize+"pt;font-weight:"+te
xtweight+";text-decoration:"+textdecoration+";colo
r:"+textfontcolortoggle[i]+";font-style:"+textital
ic+";\"
onMouseOver=\"this.style.color=\'"+textfontcolorro
llover+"\'\"
onMouseOut=\"this.style.color=\'"+textfontcolortog
gle[i]+"\'\">"
content+=text[i]
content+="</a><font color="+textbgcolor+">----------</font>"
}
content+="</nobr></td></tr></table>"
}
else {
tablewidth=textwidth-2*textborder
tableheight=textheight-2*textborder
contentbg="<table width="+tablewidth+" height="+tableheight+"><tr><td><font
color="+textbgcolor+">hi</font></td></tr></table>"

content="<table height="+textheight+" cellpadding=0 cellspacing=0><tr valign=middle><td><nobr>"
for (i=0;i<text.length;i++) {
if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa}
else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb}
toggle*=-1
content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\"
style=\"position:relative;font-family:\'"+textfont
+"\';font-size:"+textfontsize+"pt;font-weight:"+te
xtweight+";text-decoration:"+textdecoration+";colo
r:"+textfontcolortoggle[i]+";font-style:"+textital
ic+";\" >"
content+=text[i]
content+="</a><font color="+textbgcolor+">----------</font>"
}
content+="</nobr></td></tr></table>"
}
}

if (ns4) {
toggle=1
document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>');
document.write('<ilayer name="marker" bgcolor="'+textbordercolor+'" width='+textwidth+' height='+textheight+'></ilayer>');
document.write('</td></tr></table>')
document.write('<layer name="tickerbg" left='+textborder+' top='+textborder+' width='+(textwidth-4*textborder)+' height='+(textheight-2*textborder)+' bgcolor='+textbgcolor+' visibility=hide>'+contentbg+'</layer>')
document.write('<layer left=-50000 name="ticker" onMouseOver="setscrollready(0)"
onMouseOut="setscrollready(1)">loading</layer>');

}

if (ie || ns6) {
document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>');
document.write('<div id="marker" style="position:relative; width:'+textwidth+'; height:'+textheight+'" ></div>');
document.write('</td></tr></table>')
if (ns6) {
var tablewidth=textwidth-2*textborder
var tableheight=textheight-2*textborder
}
else {
var tablewidth=textwidth
var tableheight=textheight
}
document.write('<div ID="roof"
style="position:absolute;width:'+tablewidth+'px;he
ight:'+tableheight+'px;border-style:solid;border-w
idth:'+textborder+'px;border-color:'+textbordercol
or+';background-color:'+textbgcolor+';visibility:h
idden;overflow:hidden" onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">')
document.write('<span ID="ticker"
style="position:absolute;top:0px;left:0px;visibili
ty:hidden">'+content+'</span>')

if (ie && !opera) {
for (i=0;i<=translayersmax;i++) {
document.write('<span ID="trans'+i+'"
style="position:absolute;top:0px;left:'+translayer
sleftpos+'px;width:'+translayerswidth+'px;height:'
+tableheight+'px;background-color:'+textbgcolor+';
filter:alpha(opacity='+translayersopacity+');overf
low:hidden"> </span>')
translayersleftpos+=translayerswidth
translayersopacity-=translayersfactor
}

translayersleftpos=tablewidth-translayersleftpos

for (ii=0;ii<=translayersmax;ii++) {
document.write('<span ID="trans'+ii+'"
style="position:absolute;top:0px;left:'+translayer
sleftpos+'px;width:'+translayerswidth+'px;height:'
+tableheight+'px;background-color:'+textbgcolor+';
filter:alpha(opacity='+translayersopacity+');overf
low:hidden"> </span>')
translayersleftpos+=translayerswidth
translayersopacity+=translayersfactor
}
}

if (ns6 && !opera) {
for (i=0;i<=translayersmax-1;i++) {
document.write('<span ID="transleft'+i+'"
style="position:absolute;top:0px;left:'+translayer
sleftpos+'px;width:'+translayerswidth+'px;height:'
+tableheight+'px;background-color:'+textbgcolor+';
-moz-opacity:'+translayersopacity/100+';overflow:h
idden"> </span>')
translayersleftpos+=translayerswidth
translayersopacity-=translayersfactor
if (translayersopacity<0) {translayersopacity=0.001}
}

translayersleftpos=tablewidth-translayersleftpos

translayersopacity=0.001
for (i=0;i<=translayersmax-1;i++) {
document.write('<span ID="transright'+i+'"
style="position:absolute;top:0px;left:'+translayer
sleftpos+'px;width:'+translayerswidth+'px;height:'
+tableheight+'px;background-color:'+textbgcolor+';
-moz-opacity:'+translayersopacity/100+';"> </span>')
translayersleftpos+=translayerswidth
translayersopacity+=translayersfactor
}
}

document.write('</div>')
if (ns6) {
document.write('<span ID="tickersize"
style="position:absolute;top:0px;left:-5000px;visi
bility:hidden">'+content+'</span>')
}
}

function doscroll(){
if (scrollready) {
if(ns4){
document.ticker.left+=-step;
if
(document.ticker.left<document.marker.pageX+1*text
border) {
document.ticker.clip.left+=step;
}

document.ticker.clip.right+=step;

if(document.ticker.left<-textcontentwidth+docum
ent.marker.pageX) {

document.ticker.left=textwidth+document.marker
.pageX-1*textborder;
document.ticker.clip.left=0
document.ticker.clip.right=0
}
}
if (ie) {
document.all.ticker.style.posLeft+=-step
if
(document.all.ticker.style.posLeft<-textcontentwid
th) {
document.all.ticker.style.posLeft=textwidth
}
}
if (ns6) {

document.getElementById('ticker').style.left=par
seInt(document.getElementById('ticker').style.left
)-step
if
(parseInt(document.getElementById('ticker').style.
left)<-textcontentwidth) {

document.getElementById('ticker').style.left=t
extwidth
}
}
timer=setTimeout("doscroll()",50)
}
else {
clearTimeout(timer)
}
}

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;
}

function initscroller(){
if (ns4) {
getcontent()
var thisspan=eval("document.ticker")
thisspan.document.clear()
thisspan.document.write(content)
thisspan.document.close()
textcontentwidth=thisspan.clip.right

document.tickerbg.left=document.marker.pageX+1*t
extborder

document.tickerbg.top=document.marker.pageY+1*te
xtborder

thisspan.left=document.marker.pageX-1*textborder
+textwidth
thisspan.top=document.marker.pageY
thisspan.clip.width=textcontentwidth;
thisspan.clip.height=textheight;
thisspan.clip.left=0
thisspan.clip.right=0
document.tickerbg.visibility="show";
thisspan.visibility="show";
}
if (ie) {

textcontentwidth=document.all.ticker.clientWidth

document.all.roof.style.posLeft=DL_GetElementLef
t(document.all.marker);

document.all.roof.style.posTop=DL_GetElementTop(
document.all.marker);
document.all.ticker.style.posLeft=textwidth
document.all.ticker.style.clip='rect(0px, '+textcontentwidth+'px, '+(textheight)+'px, 0px)';
document.all.roof.style.visibility="visible";

document.all.ticker.style.visibility="visible";

}
if (ns6) {

textcontentwidth=document.getElementById('ticker
size').offsetWidth

document.getElementById('roof').style.left=DL_Ge
tElementLeft(document.getElementById('marker'));

document.getElementById('roof').style.top=DL_Get
ElementTop(document.getElementById('marker'));

document.getElementById('ticker').style.left=tex
twidth

document.getElementById('ticker').clip='rect(0px
, '+textcontentwidth+'px, '+(textheight)+'px, 0px)';

document.getElementById('roof').style.visibility
="visible";

document.getElementById('ticker').style.visibili
ty="visible";
}
doscroll()
}

function setscrollready(whatanswer) {
if (whatanswer==1) {
scrollready=true
checkscroll()
}
else {
scrollready=false
}
}

function checkscroll() {
clearTimeout(timer)
if (scrollready) {
doscroll()
}
}
function reopenpage() {
history.go(0)
}
window.onresize=reopenpage
window.onload=initscroller
</script>

</div>

zv3nd

Niveau 6

07 mars 2008 à 23:35:58

function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
{
hoverColour = mouseOverColour;
numLinks = numberOfLinks;
rate = 1;
numFadeLevels = 30;
function initArray(theArray, length, val)
{
for(i=0;i<length;i++)
{
theArray[i] = val;
}
}
bgR = '0000' + fadeOutColour.substring(1,3)
bgG = '0000' + fadeOutColour.substring(3,5)
bgB = '0000' + fadeOutColour.substring(5,7)
currR = new Array(numLinks);
currG = new Array(numLinks);
currB = new Array(numLinks);
count = new Array(numLinks);
fadeOut = new Array(numLinks);
continuous = new Array(numLinks);
newColour = new Array(numLinks);
tID = new Array(numLinks);
redInterval = toDecimal(bgR) / numFadeLevels;
greenInterval = toDecimal(bgG) / numFadeLevels;
blueInterval = toDecimal(bgB) / numFadeLevels;

initArray(currR,numLinks,0);
initArray(currG,numLinks,0);
initArray(currB,numLinks,0);
initArray(count,numLinks,0);
initArray(fadeOut,numLinks,true);
initArray(continuous,numLinks,true);
}
function startFade(id)
{
if(fadeOut[id] == true)
{
currR[id] += redInterval;
currG[id] += greenInterval;
currB[id] += blueInterval;
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
if(++count[id] == numFadeLevels)
{
fadeOut[id] = false;
}
}
else
{
currR[id] -= redInterval;
currG[id] -= greenInterval;
currB[id] -= blueInterval;
newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
if(--count[id] == 0)
{
fadeOut[id] = true;
}
}
if(continuous[id] == true)
{
document.getElementById(id).style.color = newColour[id];
}
else
{
document.getElementById(id).style.color = hoverColour;
}
clearTimeout(tID[id]);
tID[id]=setTimeout('startFade(' + id + ')', rate);
}
function continueFade(id)
{
continuous[id] = true;
}
function stopFade(id)
{
continuous[id] = false;
}
function StartTimers()
{
for(id=0; id<numLinks; id++)
{
//vitesse du fading ici 100
t=setTimeout('startFade(' + id + ')', id*100);
}
}
//initLinks('couleur du mouse-over', 'nombre de liens', 'couleur extrême du fade')
initLinks('white', 6, '#FFFF00');
//-->
</script>

<br><br><br>
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="index.html">Accueil</a><br>
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="mes_exper.html">Experience</a><br>
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="ma_fiche.html">Ma fiche</a><br>
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="mes_passions.html">Mes passions</a><br>
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="me_contacter.html">Me contacter</a><br>
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.ericvermet.fr/">Forum</a><br>

</div>

<p> <p>
<style type="text/css">

</style>

<table align="center" border="0" cellpadding=0 cellspacing=0>
<tr>
<td align="center">DIAPORAMA</td>
</tr>
<tr><td align="center"><br /></td></tr>
<tr>
<td align="center">
<object type="application/x-shockwave-flash" data="myalbum.swf" width="450" height="350" id="tech" align="middle">
<param name="movie" value="myalbum.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</td>
</tr>
<tr>
<td align="center" ><br />

</td>

</table>

</div>

</div>

</body>

</html>

zv3nd

Niveau 6

07 mars 2008 à 23:36:30

Pour le css :

body
{
text-align: center ;
margin: 0;
padding: 0;
background: #B6FCFF;
}

header

{
background:
url("http://img136.imageshack.us/img136/1364/banni
redc9.png") no-repeat;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="http://img136.imageshack.us/img136/1364/bann
iredc9.png");
height: 180px;
width: 760px;
margin: 0px;
background-color: #B6FCFF;
}

.scripy
{
margin: 0px;
}

conteneur

{
text-align: left;
width: 760px;
margin-left: auto;
margin-right: auto;
background-color:#B6FCFF;
margin: 0 auto;
position: relative;
}

corps

{
background-image: url("images/fond_accueil.png");
height: 480px;
width: 520px;
margin-left: 237px;
margin-top: 20px;
margin-bottom: 0px;
margin-right: 0px;
}

{
float: left;
margin-left: 57px;
margin-top: 20px;
width: 160px;
}

.element_menu
{
height: 400px;
padding: 15px;
padding-bottom: 65px;
background-image: url("images/fond_menu.png");
}

.element_menu h1
{
padding-top: 50px;
font-weight: bold;
text-decoration: underline;
font-size: 35px;
color: black;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu a
{
font-variant: small-caps;
font-size: 18px;
color: black;
}

.element_menu a:hover
{
color: white;
}

.compteur
{
padding-top: 50px;
padding-left: 7px;

}

WiggumRalph

Niveau 1

07 mars 2008 à 23:40:14

C'est ça ta bannière ?

<td align="center">DIAPORAMA</td>

zv3nd

Niveau 6

07 mars 2008 à 23:43:27

Non, ca c'est un diapo que j'ai integré au corps. Ma bannière c'est le div Header, avec comme fond "fond_menu.png".

Artie-Ziff

Niveau 6

07 mars 2008 à 23:56:17

"avec comme fond "fond_menu.png"."

C'est pas ce que dit ton attribut CSS :

"background:

url("http://img136.imageshack.us/img136/1364/banni

redc9.png") no-repeat;"

Artie-Ziff

Niveau 6

08 mars 2008 à 00:01:27

.scripy
{
margin: 0px;
}

Ca ne sert à rien de repréciser margin: 0px puisque ce class est une division de #header qui définit déjà la margin à 0.

Artie-Ziff

Niveau 6

08 mars 2008 à 00:05:14

Au passage, désactive ton DOCTYPE le temps d'une première réalisation concrète de ton site. Parce qu'un DOCTYPE strict, ça restreint pas mal quand même.

zv3nd

Niveau 6

08 mars 2008 à 12:17:33

C'est à dire ? si je mets pas un doctype strict, je pourrais pas voir le resultat en temps reel. Il y aura surement des changements quand je l'hebergerais...Il faut qu'il soit compatible avec tous les explorer et firefox.

zv3nd

Niveau 6

09 mars 2008 à 20:54:50

Pourquoi dois-je désactiver mon Doctype ?

Aide à l'achat Mac
Création de sites web
Création de Jeux
Linux
Programmation
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News jeu

86 914 spectateurs

Zelda Ocarina of Time Switch 2 : J'adore, mais ce détail me pousse à être très prudent...

C’est la nouvelle qui a secoué la planète jeu vidéo ces derniers jours. Le secret de polichinelle le mieux gardé de l’industrie a enfin trouvé sa confirmation officielle. Après plusieurs mois de rumeurs, initialement colportées par le leaker NateTheHate dont la fiabilité n’est plus à prouver, Nintendo a mis fin au suspense lors de son Nintendo Direct du 09 juin dernier. Ce remake d’Ocarina of Time a servi de clou du spectacle. À travers une bande-annonce revenant sur les toutes premières minutes du jeu original, "Big N" a choisi de poser le ton et de dévoiler sa nouvelle direction artistique, sans pour autant montrer de séquences de gameplay. Une mise en bouche calculée pour ce titre phare destiné exclusivement à la Nintendo Switch 2.

Toutes les news jeu