eingedrückte Buttons

[handymanjack]

Hi@all

eingedrückte Buttons (also mouseover-effekt) sind ein alter Hut:mrgreen:, aber ich wüsste gerne wie ich Buttons dazubringen nach einem Klick darauf eingedrückt zu bleiben obwohl die Seite neu geladen wird....:-?
Die Buttons werden bei mir durch divs mit entsprechenden eigenschaften und mouseover und mouseout effekten dargestellt.8)

vielen danke für jede antwort

mit freundlichen grüßen
handymanjack

 

[Prophet]

Das sollte über CSS mit der pseudoklasse :visited funktionieren.

Über javascript geht das nur schlecht weil man sich informationen nicht über mehrere seiten merken kann ausser man setzt einen cookie. Wenn du das für so eine spielerei machst dann schalten die besucher ihre cookies zurecht ab. Dafür sind sie nicht erfunden worden.

 

[handymanjack]

Stimmt schon, aber......

ich habe es bereits mit der Pseudo Klasse :visited probiert, aber es funktioniert leider nicht.

Hier ein Beispiel-Quellcode wie ichs machen würde (wahrscheinlich liegt der Fehler bei mir):
button ist ein className:)

a.button:visited {
sonstige Befehle und
background-image: url('url');
}

Was ist falsch:?: oder muss es so sein:?::

button.a:visited ....

Ich meine zwar dass das falsch ist aber ....:razz:

Vielen Dank für deine Antwort und mit dem Cookie haste selbstverständlich recht^^ - deswegen hab ich mein problem ja gepostet....

 

[Frank]

Also ich würde das Problem so angehen
Du erstellst für den eingedrückten und nicht eingedrückten Button jeweils eine css Klasse
Z.B:

.b1 {background-color:red;}
.b2 {background-color:blue;}

Wenn nun jemand über den button fährt kannst du die Klasse mit Javascript ändern. Besser wäre es natürlich mit der angesprochenen Pseudoklasse.

Beim klick übergibst du ne Variable die du auf der anderen Seite ausliest und dann den Button schon gleich auf eingedrückt setzen.

Die Beste möglichkeit meiner meinung nach

<style>
a.b1:link,a.b1:visited,a.b1:active
{
  background-color:red;
}
a.b1:hover
{
  background-color:orange;
}
a.b2:link,a.b2:visited,a.b2:active
{
  background-color:orange;
}
a.b2:hover
{
  background-color:orange;
}
</style>
<?php
  if(isset($_REQUEST["id"]) && $_REQUEST["id"] == 1)
  {
    ?>
    <a href="datei.ext?id=1" class="b2">Link1</a>
    <?php
  }
  else
  {
    ?>    
    <a href="datei.ext?id=1" class="b1">Link1</a>
    <?php
  }  
  if(isset($_REQUEST["id"]) && $_REQUEST["id"] == 2)
  {
    ?>
    <a href="datei.ext?id=2" class="b2">Link2</a>
    <?php
  }
  else
  {
    ?>    
    <a href="datei.ext?id=2" class="b1">Link2</a>
    <?php
  }
?>

Alternativ mit Switch etc lösen

 

[handymanjack]

is klar, aber ....

Die Seite die dann geladen wir ist dieselbe wie vorher:!:, da ich das ganze mit einer index.php und include mache...

<a href="index.php?seite=start">link</a>
<a href="index.php?seite=aktuelles">link</a>
<?
    if(isset($_REQUEST['seite']) && $_REQUEST['seite'] != "start") {
         include "includes.php";
    } else {
         include "start.html";
    }
?>
Trotzdem vielen Dank^^

Daher funktioniert das ganze auch nicht. Ich hab es bereits mit der Pseudoklasse a.button:visited{ CSS-Code } versucht aber geht net....

 

[Frank]

Also ich include auch meine dateien in die index.php und ich habe es so gelöst

Stylesheet

a.navi:link,a.navi:visited,a.navi:active
{
display:block;
float:left;
width:124px;
padding:0px;
margin:0px;
background-color:#222;
color:#5588ee;
text-decoration:none;
text-align:center;
border-right:1px solid black;
}
a.navi:hover
{
display:block;
float:left;
width:124px;
padding:0px;
margin:0px;
background-color:#444;
color:#5588ee;
text-decoration:none;
text-align:center;
border-right:1px solid black;
}
a.navix:link,a.navix:visited,a.navix:active
{
display:block;
float:left;
width:124px;
padding:0px;
margin:0px;
background-color:#5588ee;
color:#222;
text-decoration:none;
text-align:center;
border-right:1px solid black;
}
a.navix:hover
{
display:block;
float:left;
width:124px;
padding:0px;
margin:0px;
background-color:#5588ee;
color:#444;
text-decoration:none;
text-align:center;
border-right:1px solid black;
}

Navigation in der Index.php

<a href="?id=1" class="navi<?php if($_REQUEST["id"] == 1) echo "x"; ?>">Home</a>
<a href="?id=2" class="navi<?php if($_REQUEST["id"] == 2) echo "x"; ?>">Stundenplan</a>
<a href="?id=3" class="navi<?php if($_REQUEST["id"] == 3) echo "x"; ?>">Hausaufgaben</a>

Include, auch auf der Index.php

<?php
switch($_REQUEST["id"])
{
  case 1:
    include("sites/home.php");
  break;
  case 2:
    include("sites/gb.php");
  break;
  case 3:
    include("sites/ha.php");
  break;
  case 4:
    include("sites/termine.php");
  break;
  case 5:
    include("sites/kliste.php");
  break;
  case 6:
    include("sites/impressum.php");
  break;
  case 7:
    include("sites/std.php");
  break;
  case 8:
    include("sites/themen.php");
  break;
  default:
    include("sites/kommtnoch.php");
  break;
}
?>

So funktioniert das bei mir wunderbar

 

[handymanjack]

danke

stimmt - das is ne lösung^^

vielen dank und
mfg handymanjack