Buttons ohne Java???

Webmaster?? · 18. Juni 2005

Hi Leute!!

Ich möchte gerne buttons haben, die sich verändern, darf aber kein Java verwenden... geht das und wenn ja wie

thx

dkdenz · 18. Juni 2005

Animated Gif's...

Webmaster?? · 18. Juni 2005

Ne also welche die sich bei mouseover verändern... z.B. aktiv werden (ein helleres bild z.B. geladen wird)

dkdenz · 19. Juni 2005

Du solltest Schon mal präziser werden...
Java heißt nicht, sondern JavaScript; zwei völlig verschiedene Dinge...

Ok, ich weiß was Du meinst:
(Das in den Head-Bereich Deiner Seite)

Code:

<style type="text/css">   
a:link, a:visited, a:active
{
color:#fff;
text-decoration:none;
font-size:0.9em;

}
a.menu:hover
{
color:#ff0000;
text-decoration:none;
font-size:0.9em;
}
</style>

Webmaster?? · 19. Juni 2005

es geht halt darum, dass ich eine Barrierefreie Seite machen muss und da darf man doch kein Javascript verwenden oder??
so und ich hab underschiedliche bilder (Buttons) die beim drübergehen mit der maus erscheinen sollen und wenn ich sie wieder wegtuhe das alte wieder kommt..

Freelancer · 19. Juni 2005

Webmaster?? schrieb:
es geht halt darum, dass ich eine Barrierefreie Seite machen muss und da darf man doch kein Java verwenden oder??

Wer sagt dass denn? In wie fern hast du dich mit Barrierefreihem Webdesign beschäftigt? Strikt zu sagen: Da darf man kein Java (oder in diesem Fall JavaScript) verwenden" ist wohl falsch, denn man kann auch Java Barrierefrei einsetzen...

dkdenz · 19. Juni 2005

Code:

<style type="text/css">   
a:link, a:visited, a:active
{
display:block;
width:100px;
height:20px;
color:#000;
text-decoration:none;
font-size:0.9em;
background:url(bild_normal.jpg) no repeat;
}
a.menu:hover
{
display:block;
width:100px;
height:20px;
color:#ff0000;
text-decoration:none;
font-size:0.9em;
background:url(bild_hover.jpg) no repeat;
}
</style>

Webmaster?? · 19. Juni 2005

Muss ich den code dann vor bei jedem button einfüge oder wie??
ich bin nämlich ein neuling wie ihr sicher alle bemerkt habt und brauche das ganze so, wie ich es bis jetzt noch nicht getan hab - nämlich ausführlich

Trotdem schon mal Danke!!

dkdenz · 19. Juni 2005

Webmaster?? schrieb:
Muss ich den code dann vor bei jedem button einfüge oder wie??
ich bin nämlich ein neuling wie ihr sicher alle bemerkt habt und brauche das ganze so, wie ich es bis jetzt noch nicht getan hab - nämlich ausführlich

Trotdem schon mal Danke!!

So sieht eine rudimentäre Datei mit obigen CSS-Beispiel aus:

Code:

<html>
<head>
  <title></title>
<style type="text/css">
a.menu:link, a.menu:visited, a.menu:active {
display:block;
width:100px;
height:20px;
color:#000;
text-decoration:none;
font-size:0.9em;
background:url(bild_normal.jpg) no repeat;
}
a.menu:hover {
display:block;
width:100px;
height:20px;
color:#ff0000;
text-decoration:none;
font-size:0.9em;
background:url(bild_hover.jpg) no repeat;
}
</style>
</head>
<body>
<a class="menu" href="irgendwohin1.html">irgendwohin1</a>
<a class="menu" href="irgendwohin2.html">irgendwohin2</a>
<a class="menu" href="irgendwohin3.html">irgendwohin3</a>
<a class="menu" href="irgendwohin4.html">irgendwohin4</a>
</body>
</html>

Bei width und height kannst Du die Werte so verändern wie Du sie für Deine Grafiken brauchst.
Und bild_normal.jpg und bild_hover.jpg kannst Du ebenfalls nennen wie Du willst.

Webmaster?? · 20. Juni 2005

Janee es soll ein ganz anderes Bild geladen werden wenn ich drüber gehe...

wartet mal hier ein link
http://acteasy.de.tt/

da verändern sich die Buttons, aber das Scrpit ist soo lang...

dkdenz · 20. Juni 2005

Webmaster?? schrieb:
Janee es soll ein ganz anderes Bild geladen werden wenn ich drüber gehe...

Was meinst Du, was das Fettmarkierte ist?

Code:

<html>
<head>
  <title></title>
<style type="text/css">
a.menu:link, a.menu:visited, a.menu:active {
display:block;
width:100px;
height:20px;
color:#000;
text-decoration:none;
font-size:0.9em;
background:url([B]bild_normal.jpg[/B]) no repeat;
}
a.menu:hover {
display:block;
width:100px;
height:20px;
color:#ff0000;
text-decoration:none;
font-size:0.9em;
background:url([B]bild_hover.jpg[/B]) no repeat;
}
</style>
</head>
<body>
<a class="menu" href="irgendwohin1.html">irgendwohin1</a>
<a class="menu" href="irgendwohin2.html">irgendwohin2</a>
<a class="menu" href="irgendwohin3.html">irgendwohin3</a>
<a class="menu" href="irgendwohin4.html">irgendwohin4</a>
</body>
</html>

Webmaster?? · 20. Juni 2005

ok ... habs geschafft - bzw. ihr..
Danke!!
jetzt hab ich aber noch eine frage :
ich hab da zwei tabellen. die untere ist 930px breit. In der oberen sind die buttons. die Buttons sind aber insgesamt nicht 930px breit- wie kann ich sie ohne abstand in der mitte ausrichten??
thx

dkdenz · 20. Juni 2005

Code:

<table style="text-align:center"></table>

Webmaster?? · 20. Juni 2005

funzt nicht.. zwischen den einzelnen bildern ist immernoch platz.

dkdenz · 21. Juni 2005

Webmaster?? schrieb:
funzt nicht.. zwischen den einzelnen bildern ist immernoch platz.

Naja, weißt Du, es ist nicht ganz einfach, rumzuraten...
Etwas Quelltext oder ein Link wäre schon recht hilfreich...

sanchez · 21. Juni 2005

Webmaster?? schrieb:
funzt nicht.. zwischen den einzelnen bildern ist immernoch platz.

sind die denn wenigstens zentriert?

sonst auch mal in die td das style="text-align:center" reinschreiben...

Webmaster?? · 21. Juni 2005

Habs jetzt mit ner "blinden Zelle" gemacht... aber lernen wie es wirklich geht würde ich dennoch gerne..
hier der Quelltext (und bitte beachtet ich mache das erst seit 3 Monaten unprofessionell - nur in der Schule)
und hab auch mein altes (langes) Script gelassen.....

Code:

<html>
<head>
<title>ACTeasy-Homepage</title>
<meta name="author" content="Phil-Joel Groenewold">
</head>
<body topmargin="5" text="#000000" bgcolor="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">



<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>


<div align="center"><table cellspacing="0" cellpadding="0" width="759">
<tr>
 <td width="8"></td>
 <td valign="bottom" width="270"><div align="left"><a href="Startseite/Startseite.html" target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Startseite','','Buttons/Start_on.GIF',1)"><img name="Startseite" src="Buttons/Start.GIF" border="0" alt="Zur Startseite"></a></div></td>
 <td><div align="center"><img src="pics/logo.GIF" width="219" alt="ACTeasy-Logo"></div></div></td>
 <td valign="bottom" width="270"><div align="right"><a href="http://www.foren.de/system/user_philgroenewold.html"target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forum','','Buttons/Forum_on.GIF',8)"><img name="Forum" src="Buttons/Forum.GIF" border="0" alt="Zum Forum"></a></div></td>
 <td width="10"></td>
 </tr>
<tr>


 <table cellpadding="0" cellspacing="0">
  <tr>
   <div align="center">
   <td>         <a href="Aktuelles/Aktuelles.html"         target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Aktuelles','','Buttons/Aktuelles_on.GIF',1)"><img name="Aktuelles" src="Buttons/Aktuelles_off.GIF" border="0" alt="Aktuelles"></a></td>
   <td>         <a href="UeberACTeasy/UeberATCeasy.html"   target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Über Acteasy','','Buttons/UeberACTeasy_on.GIF',1)"><img name="Über Acteasy" src="Buttons/UeberACTeasy_off.GIF" border="0" alt="Über Acteasy"></a></td>
   <td>         <a href="Gruppen/Gruppen.html"               target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gruppen','','Buttons/Gruppen_on.GIF',3)"><img name="Gruppen" src="Buttons/Gruppen_off.GIF" border="0" alt="Theatergruppen"></a></td>
   <td>         <a href="Team/Team.html" target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Team','','Buttons/Team_on.GIF',4)"><img name="Team" src="Buttons/Team_off.GIF" border="0" alt="Team"></a></td>
   <td>         <a href="Neue/Neue.html"                     target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Neue','','Buttons/Neue_on.GIF',4)"><img name="Neue" src="Buttons/Neue_off.GIF" border="0" alt="Für Neue"></a></td>
   <td>         <a href="Archiv/Archiv.html"                 target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Archiv','','Buttons/Archiv_on.GIF',5)"><img name="Archiv" src="Buttons/Archiv_off.GIF" border="0" alt="Archiv"></a></td>
   <td>         <a href="Presseberichte/Presseberichte.html" target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Presseberichte','','Buttons/Presseberichte_on.GIF',6)"><img name="Presseberichte" src="Buttons/Presseberichte_off.GIF" border="0" alt="Presseberichte"></a></td>
   <td>         <a href="Kontakt/Kontakt.html"               target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','Buttons/Kontakt_on.GIF',7)"><img name="Kontakt" src="Buttons/Kontakt_off.GIF" border="0" alt="Zum Kontakt-Formular"></a></td>
   <td>         <a href="Links/Links.html"                   target="iframe"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','Buttons/Links_on.GIF',9)"><img name="Links" src="Buttons/Links_off.GIF" border="0" alt="Links"></a></td>
   </div>
  </tr>
</table>

</tr>
</table>



<table align="center" border="0" cellpadding="0" cellspacing="0" width="759">
      <tbody><tr>
        <td background="pics/lo.bmp" height="7" width="7"></td>
        <td colspan="1" background="pics/oben.bmp" height="7" width="746"></td>
        <td background="pics/ro.bmp" height="7" width="7"></td>
      </tr>
      <tr>
        <td background="pics/links.bmp" height="220" width="7"></td>
        <td colspan="1" bgcolor="#FF0000" width="746" valign="top">
        <div align="center"><iframe name="iframe" title="iframe" id="iframe" hspace="0" marginheight="0" marginwidth="0" vspace="0" src="Startseite/Startseite.html" align="right" frameborder="0" height="220" width="737"></iframe></div></td>
        <td background="pics/rechts.bmp" height="220" width="7"></td>
      </tr>
      <tr>
        <td background="pics/lu.bmp" height="7" width="7"></td>
        <td colspan="1" background="pics/tablebottom.bmp" height="7" width="746"></td>
        <td background="pics/ru.bmp" height="7" width="7"></td>
      </tr>
    </tbody>
</div></table>
</body>
</html>

Danke

Webmaster?? · 21. Juni 2005

...und noch was.. ich weiß zwar nicht, ob es hier reingehört, aber ich hätte auf meiner Seite gerne so zweit buttons, mir denen man auf die vorherige Seite gehen kann und auf die nächste (so wie oben im Browser)
wär gut, wenn mir jemand sagen könnte, wie das geht.

dkdenz · 21. Juni 2005

http://de.selfhtml.org/javascript/objekte/history.htm

Webmaster?? · 22. Juni 2005

Ich hab noch ne rieeesen Bitte an euch - Und zwar ist es so, dass ich eine Seite mit zwei Frames hab und eine mit einer Tabelle, in der eine iframe eingebaut ist.
Auf der Seite mit den zwei Frames gibt es unterschiedliche Links, bei denen die Tabelle mit den dazugehörigen iframe-Inhalten geladen werden soll. – die alten Frames sollen aber gleichzeitig weg-
Den einzigen Ansatzpunkt, den ich hab ist target=“_top“, so wird zwar die Seite mit der Tabelle geladen, aber der Inhalt ist immer der gleiche..
Wär super wenn mir jemand sagen könnte, wie man das als schlauer Mensch am besten machen würde….
Danke

Buttons ohne Java???

New member

New member

New member

New member

New member

Lounge-Member

New member

New member

New member

New member

New member

New member

New member

New member

New member

Lounge-Member

New member

New member

New member

New member