• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

soft-Rollovereffect

Status
Für weitere Antworten geschlossen.
A

aerox

Neues Mitglied
ich bins wieder!
ich glaube ich mache hier die hälfte der Threads :)

also, ich möchte ein menü machen, wo die buttons langsam die Farbe
ändern! Ich habe schon damit angefangen, jedoch klappt es nicht!
habe erstmal nur die erste zelle belegt, und nur onmouseover!

HTML: 
<HTML>
<HEAD>
<TITLE> tests </TITLE>
<script type="text/javascript">
function chbgon (menupunkt) {
    var tdid = "m1td" + menupunkt;
    var ort = document.getElementById("m1td1");
    var i = 0;
    var menufarben = new Array("cccccc","aaaaaa","888888","666666");
      function on() {
	var i = i + 1;
	if ( i==3 ) {
	window.clearInterval("on()");
      } else {
	ort.bgColor = "#" + menufarben[i];
      };
};
window.setInterval("on()", 1000);
};
</script>
<STYLE TYPE="text/css">
.menu1 tr td { 
border:1px #555555 solid;
width:200px;
height:25px;
text-align:center;
}
</style>
</HEAD>
<BODY align="center" bgcolor="white">

	<table class="menu1">
		<tr><td id="m1td1" onmouseover="chbgon('1')" onmouseout=""> Zelle </td></tr>
		<tr><td id="m1td2" onmouseover=""> Zelle </td></tr>
		<tr><td id="m1td3" onmouseover=""> Zelle </td></tr>
		<tr><td id="m1td4" onmouseover=""> Zelle </td></tr>
		<tr><td id="m1td5" onmouseover=""> Zelle </td></tr>
	</table>



</BODY>
</HTML>
 
Zuletzt bearbeitet von einem Moderator:
Moinsen!

Mach das mal so:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
cFader = {
 speed : 40,
 steps : 8,
 active : 0,
 startc : 0,
 endc : 0,
 
 startr : 0,
 startg : 0,
 startb : 0,
 endr : 0,
 endg : 0,
 endb : 0,
 
 alllinks : true,
 
 startColor : '#000000',
 endColor : '#CCCCCC'
}
cFader.colorToNumber = function( sColor )
{
 sRCol = /^#/
 return parseInt( '0x'+sColor.replace( sRCol, '' ) )
}
cFader.numberToColor = function( nColor )
{
 nColor |= 1<<24
 return '#'+nColor.toString(16).substr(1)
}
cFader.init = function( element )
{
 sSC = element.getAttribute( 'sc' )
 if( sSC != null && sSC.length != 0 ) SC = sSC
 else SC = this.startColor
 sEC = element.getAttribute( 'ec' )
 if( sEC != null && sEC.length != 0 ) EC = sEC
 else EC = this.endColor
 with (this)
 {
  startc = colorToNumber( SC )
  endc = colorToNumber( EC )
  startr = (startc & 0xff0000) >>> 16
  startg = (startc & 0x00ff00) >>> 8
  startb = (startc & 0x0000ff)
 
  endr = (endc & 0xff0000) >>> 16
  endg = (endc & 0x00ff00) >>> 8
  endb = (endc & 0x0000ff)
 }
}
cFader.fadeIn = function( element )
{
 this.init( element )
 elName = 'cFaderActive'+(this.active++)
 eval( 'this.'+elName+'=element' )
 for( step = 0; step <= this.steps; step++ )
 {
  with( this )
  {
   nColorR = startr*((steps-step)/steps)+endr*(step/steps)
   nColorG = startg*((steps-step)/steps)+endg*(step/steps)
   nColorB = startb*((steps-step)/steps)+endb*(step/steps)
   nColor = startr*((steps-step)/steps)+endr*(step/steps) << 16 | startg*((steps-step)/steps)+endg*(step/steps) << 8 | startb*((steps-step)/steps)+endb*(step/steps)
  }
  sColor = this.numberToColor( nColor )
  //sColor = 'rgb('+nColorR+','+nColorG+','+nColorB+')' // für RGB Kontrast
  setTimeout('cFader.doFade("'+elName+'", "'+sColor+'")', this.speed*(step+1))
 }
 setTimeout( 'cFader.clearRef("'+elName+'")', this.steps*2*this.speed ) 
}
cFader.fadeOut = function( element )
{
 this.init( element )
 elName = 'cFaderActive'+(this.active++)
 eval( 'this.'+elName+'=element' )
 for( step = 0; step <= this.steps; step++ )
 {
  with( this )
  {
   nColorR = endr*((steps-step)/steps)+startr*(step/steps)
   nColorG = endg*((steps-step)/steps)+startg*(step/steps)
   nColorB = endb*((steps-step)/steps)+startb*(step/steps)
   nColor = endr*((steps-step)/steps)+startr*(step/steps) << 16 | endg*((steps-step)/steps)+startg*(step/steps) << 8 | endb*((steps-step)/steps)+startb*(step/steps)
  }
  sColor = this.numberToColor( nColor )
  //sColor = 'rgb('+nColorR+','+nColorG+','+nColorB+')'
  setTimeout('cFader.doFade("'+elName+'", "'+sColor+'")', this.speed*(step+1))
 }
 setTimeout( 'cFader.clearRef("'+elName+'")', this.steps*2*this.speed ) 
}
cFader.doFade = function( elName, sColor )
{
 element = eval( 'this.'+elName )
 sFType = element.getAttribute( 'fade' )
 if( ( sFType == null ) || ( sFType == '' ) || ( sFType == 'fg' ) )
 {
  element.style.color = sColor
 }
 else if( sFType == 'bg' )
 {
  element.style.backgroundColor = sColor
 }
}
cFader.clearRef = function( elName )
{
 element = eval( 'this.'+elName+'=null' )
}
// get real element
function getReal( e )
{
 hElement = ( e.srcElement ) ? e.srcElement : e.originalTarget
 if( hElement == null )
 {
  return null
 } 
 try
 {
  while( ( hElement.tagName ) && !( /(body|html)/i.test( hElement.tagName ) ) )
  {
   sAttr = hElement.getAttribute( 'fade' )
   if ( sAttr != null && sAttr != '' )
   {
    return hElement
   }
   else if( cFader.alllinks )
   {
    if( hElement.tagName.toLowerCase() == 'a' )
    {
     return hElement
    }
   }
   hElement = hElement.parentNode
  } 
 }
 catch( hException )
 {
 }
 return null
}
// activation
function fadeMouseOver( e )
{
 if( !e ) e = window.event
 element = getReal( e )
 if( element != null ) cFader.fadeIn( element )
}
// back to normal
function fadeMouseOut( e )
{
 if( !e ) e = window.event
 element = getReal( e )
 if( element != null ) cFader.fadeOut( element )
}
if( document.attachEvent ) 
{
 document.attachEvent( 'onmouseover', fadeMouseOver )
 document.attachEvent( 'onmouseout', fadeMouseOut )
}
else if( document.addEventListener )
{
 document.addEventListener( 'mouseover', fadeMouseOver, true )
 document.addEventListener( 'mouseout', fadeMouseOut, true )
}
else if( document.all )
{
 document.onmouseover = fadeMouseOver
 document.onmouseout = fadeMouseOut
}
</script>
<STYLE TYPE="text/css">
body {
background-color: #000000;
}
.menu1 tr td {
background-color: #000000;
border:1px #555555 solid;
color:#FF0000;
font-weight:bold;
font-family:Verdana;
font-size:17px;
width:200px;
height:25px;
text-align:center;
}
</style>
</head>
<body>
<table class="menu1">
<tr>
<td id="m1td1" class="fade" fade="bg" sc="#000000" ec="#C0C0C0">Zelle</td>
</tr><tr>
<td id="m1td2" class="fade" fade="bg" sc="#000000" ec="#C0C0C0">Zelle</td>
</tr><tr>
<td id="m1td3" class="fade" fade="bg" sc="#000000" ec="#C0C0C0">Zelle</td>
</tr><tr>
<td id="m1td4" class="fade" fade="bg" sc="#000000" ec="#C0C0C0">Zelle</td>
</tr><tr>
<td id="m1td5" class="fade" fade="bg" sc="#000000" ec="#C0C0C0">Zelle</td>
</tr>
</table>
</body>
</html>
Getestet im IE / FF!

MfG Speedy
 
Sieht echt gut aus,
aber ist das nicht ein bisschen viel geskripte?
kann man das nicht ganz simpel machen?
 
ja, vorallem ist die lösung nicht valide^^. Die Attribute sc und ec gibt es nicht...

Code: 
var element,intval,colors,i
function chgcol(e,d,c) {
  element = e
  colors = c
  i = 0
  intval = window.setInterval("floatcolors()",d)
}
function floatcolors() {
  if(i<colors.length) {
    element.bgColor = colors[++i]
  }
  else {
    window.clearInterval(intval)
  }
}

Jetzt musst du das ganze nurnoch mit onmouseover aufrufen

Beispiel:
Code: 
onmouseover="chgcolor(this,100,new Array('#cccccc','#aaaaaa','#888888','#666666'))"


onmouseout="chgcolor(this,100,new Array('#666666','#888888','#aaaaaa','#cccccc'))"

Du rufst einfach die Funktion chgcolor auf.
Als ersten Parameter übergibst du das element, da kannst eigentlich einfach this übergeben, ansonsten halt ein element nehmen.
Als zweitest übergibst du den delay, je größer die Zahl ist desto langsamer der Farbwechsel, 1000 entspricht ein Farbwechsel pro Sekunde.
Als drittes übergibst du ein Array mit den Farben, mit denen gewechselt werden soll.
 
aerox schrieb:
Sieht echt gut aus,
aber ist das nicht ein bisschen viel geskripte?
kann man das nicht ganz simpel machen?
Zum Vergrößern anklicken....

Kleiner Tipp!
Das gesamte Script kannst Du in einer externen Datei auslagern, indem Du
in dem <head> -Bereich Deine #.js Datei somit ansprichst:
<script src="#.js" type="text/javascript"></script>
(# = dein Dateinamen)
Ist somit auch platzsparender und somit übersichtlicher,
wenn man merere Scripte, oder halt ein längeres Script hat.

Frank kann das sicher bestätigen!

MfG Speedy
 
Moin Frank!

So funktioniert Dein Script dann auch. :wink:

Frank schrieb:
Code: 
var element,intval,colors,i
function chgcol[COLOR=red]or[/COLOR](e,d,c) {
  element = e
  colors = c
  i = 0
  intval = window.setInterval("floatcolors()",d)
}
function floatcolors() {
  if(i<colors.length) {
    element.bgColor = colors[++i]
  }
  else {
    window.clearInterval(intval)
  }
}
Zum Vergrößern anklicken....

MfG Speedy
 
vielen dank euch beiden :)
aber muss man nicht eigentlich nach den Variablen ein ; setzen?
 
Zuletzt bearbeitet:
nein, javascript ist eigentlich ohne ; gedacht. nur da es von leuten benutzt wird die andere Programmiersprachen kennen in denen die ; notwendig sind, haben sie einfach aus lauter gewohnheit auch in js die ; gesetzt. Hat sich sozusagen eingeschludert ^^. Javascript brauch nur ; wenn du in eine zeile mehr als ein kommando schreiben willst
 
aaah, danke dir!

und noch zu letzt, wie kann ich vile Var's in einer schleife machen?
also ungefär so
Code: 
var test = new Array()
while (i==10) {
i++
var test[i] = "teststring"
}
und kann ich auch wie oben statt "=" ein ":" nehmen?
 
du musst ein = nehemen wenn du eine Variable zuweisen möchtest.

Das : wird bei einer einfachen If abfrage benutzt:
Code: 
var test = (bedingung) ? "wenn zu trufft" : "wenn nicht zu trifft"
jenachdem ob "bedingung" zutrifft oder nicht, wird dann der jeweilige inhalt zugewiesen

Zu deiner schleife
ein Beispiel (2er Reihe der Multiplikation)
Code: 
//geht so:
var zweier = new Array()
var i = 0;
while(i<10) zweier[i++] = (i+1)*2

//oder auch so
var zweier = new Array()
for(i=0;i<10;i++) zweier[i] = (i+1)*2
 
dankeschön!

ich hab schonwieder was :D

ich möchte einen punkt, der sich parrallel zum mauszeiger bewegt!
ich habe mehrere frames!
in dem ersten frame habe ich:
Code: 
function mcoords () {
	parent.ecke.cshow.style.left=window.event.x
	parent.ecke.cshow.style.top=window.event.y
}
document.onmousemove = mcoords

und in dem, wo der punkt ist habe ich das stehen:
Code: 
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function akt () {	
	var datum = new Date()
	var stunden = (datum.getHours() <= 9) ? "0" + datum.getHours() : datum.getHours()
	var minuten = (datum.getMinutes() <= 9) ? "0" + datum.getMinutes() : datum.getMinutes()
	var sekunden = (datum.getSeconds() <= 9) ? "0" + datum.getSeconds() : datum.getSeconds()
	var zeit = stunden + " " + minuten
	document.forms[0].elements[0].value = zeit + " " + sekunden;
}
var uhr = window.setInterval(akt, 1000)

function instatus(text) {
	parent.banner.sform.szeile.value = text
}



</script>
</HEAD>
<BODY>
 <div align="center">
	<div style="width:150px; height:150px; background-image:url(bild.jpg); ">
		<div name="cshow" style="position:absolute; left:1px; top:1px;">.</div>
	</div>
	<br /><br /><br />
		<form>
			<input type="text" style="
	width:100px;
	height:30px;
	border:1px #444444 solid; 
	background-color:#000000; 
	font-family:'LCD'; 
	font-size:15pt; 
	text-align:center; 
	color:#5399ff" value="" onmouseover="instatus('Die aktuelle Uhrzeit')" onmouseout="instatus('')"/>
		</form>
 </div>
</BODY>
</HTML>
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben