Antworten auf deine Fragen:
Neues Thema erstellen

Mouseover mit CSS und php

K

Kiki McCloud

Guest

Hallo ihr Lieben!

Ich bastel seit einiger Zeit Webseiten per CSS und php, wobei mir ein Freund das "Grundgerüst" gebaut hat und ich dieses dann Grafisch und so anpasse.
Die Navigation baut sich dabei in einem php-script aus Grafiken zusammen, was mir so schon einiges an gestalterischen Freiheiten gibt. Jetzt möchte ich das ganze aber mit einem mouseover-effekt (Also Änderung der Grafik bei mouseover) ein wenig aufpeppen, habe aber keine Ahnung wie ich dies bewerkstelligen kann. Könnte mir da jemand von euch weiterhelfen?

Das script für das Navi-Menü sieht wie folgt aus:

<?php

$_CONF['PAGEDIR'] = "pages/";

$_CONF['MAINPAGE'] = "index.html"; //Stuktur

$_CONF['DEFAULTPAGE'] = "home.html"; //default-seite

$_CONF['TITLESUF'] = "Herzblut-Puppen"; //was immer oben im title steht


//navigation:
$_CONF['NAVIGATION'] = Array(
'News' => 'news.html',
'Puppen' => 'puppen.html',
'Wünsche' => 'wünsche.html',
'Kontakt' => 'kontakt.html',
'Links' => 'links.html',
);


$_CONF['NAVIGATION_PICS']= Array(
'News' => 'news.png',
'Puppen' => 'puppen.png',
'Wünsche' => 'wunsch.png',
'Kontakt' => 'kontakt.png',
'Links' => 'links.png',
);

?>

Ich danke schonmal im Voraus für Antworten und Tipps. ^^
 
Zuletzt bearbeitet von einem Moderator:

hub

hub

nicht ganz neu hier

Moin moin,
das,waas du möchtest, lässt sich einfach mit Css im Prinzip so erschlagen:
in der css:
.deine_klasse:hover {
/* hier deine css-angaben*/
}

im html:
<div class="deine_classe"> ... </div>
Konkreter, wenn du etwas meht verrätst ... (wie sieht das Html des Elements aus und wie die dazugehörige Css).

Gruß Ulli
Ps. Es scheint mir einfacher, du nutzt für die Bilder im Menü Css, das spart dir die Vervendung von Javascript)
 
K

Kiki McCloud

Guest

Erstmal danke für die Antwort. ^^
Also es hat keine div, weil DAS sozusagen schon die ganze Navi is...

Das hier wäre meine "Index"-Seite:

<html>
<head>
<title>###title###</title>
<link href="css/lightbox.css" rel="stylesheet"/>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="./style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body background="./images/bg.jpg">


<div class="page">
<a href="?page=kontakt" class="kontakt"></a>
<a href="?page=impressum" class="+impressum"></a>
<a href="?page=home" class="home"></a>
<div class="headbanner"></div>
<div class="stoffbahn"></div>

<div class="main">

<div class="nav">###navigation###</div>

<div class="content">

<div class="content2" id="content">
###content###
</div>
</div>
</div>
</div>
</body>
</html>

Und das die dazugehörige Style-Datei (also der Navi-teil davon):

.nav{
float:left;
width:150px;
padding-top:200px;
padding-left :15px;
}

.content{
height:500px;
width:630px;
float:right;
padding-top:94px;
}

a img {
border:0;
}

.content2{
height:380px;
width:515px;
margin-top:85px;
padding-left:50px;
overflow-y: auto;
}

.nav ul{
list-style:none;
margin:0;
padding:0;
}

.nav ul li{
margin:0;
padding:0;
}

Hilft das irgendwie? Sonst müsste ich versuche die Navigation die ich hab irgednwie rauszunehmen (ohne mir die ganze Seite zu zerschießen..) und die Navileiste mit einzelnen <div>s aufbauen.
 
Zuletzt bearbeitet von einem Moderator:
hub

hub

nicht ganz neu hier

Moin,
dein Code verrät leider nicht, wie du das mit den Bildern in deinem Menü handhabst.
Ein Beispiel mit Bild links vom Text könnte so aussehen:
HTML: 
<html>
<head>
  <meta charset="utf-8">
  <title>Menu-Test</title>

  <!-- Stylesheets -->
  <style>
  .nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc; }
  .nav li {
      float: left;
      padding-left: 25px;
      background-image: url(test.png);
      background-position: left top;
      background-repeat: no-repeat;
      background-size: contain;
  }
  .nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
  .nav li:hover {
      background-image: url(test-hover.png);
      background-position: left top;
      background-repeat: no-repeat;
      background-size: contain;
  }
  .nav li:hover a {
    color: #c00;
  }
    </style>
  </head>

<body>
    <ul class="nav">
    <li class="home">
        <a href="?page=home">Home</a>
    </li>
    <li class="impressum">
        <a href="?page=impressum">Impressum</a>
    </li>
    </li>
    <li class="kontakt">
        <a href="?page=kontakt">Impressum</a>
    </li>
</ul>
</body>
</html>

Dieses Beispiel ist sicher nicht perfekt, aber es zeigt einen einfachen Lösungsansatz für deinen Wunsch.
Die Bilder + Pfade, Farben und Maße müsstest du dir anpassen.

Gruß Ulli
 
K

Kiki McCloud

Guest

Erstmal Dankeschön für so viel feedback!

Also die Anzahl der "Menüpunkte" und die dafür verwendeten Bilder werden alle hierdrüber definiert:

//navigation:
$_CONF['NAVIGATION'] = Array(
'News' => 'news.html',
'Puppen' => 'puppen.html',
'Wünsche' => 'wünsche.html',
'Kontakt' => 'kontakt.html',
'Links' => 'links.html',
);


$_CONF['NAVIGATION_PICS']= Array(
'News' => 'news.png',
'Puppen' => 'puppen.png',
'Wünsche' => 'wunsch.png',
'Kontakt' => 'kontakt.png',
'Links' => 'links.png',
);

Und das ist ja mein Prob... Mit euren Vorschlägen bekomme ich nur "einen" Effekt für das ganze Menü, ich würde aber gerne jedes Bild einzeln ändern.
Also müsste ich, wenn ich das richtig verstehe, meine navigation raus und eure Ideen reinnehmene. Oder, ich mache es so wie vorgeschlagen, dann würde ich nicht die schrift ändenr, sonder ein hintergrundbild einfügen dass das entsprechende Bild hervorhebt.
Hm... Auch keine Schlechte Idee.
Ich glaub, ich werd da mal ein wenig rumbasteln, aber vielleicht fällt euch ja noch was ein.

@owieortho: Oh, Danke, das muss mir dazwischengerutsch sein. ^^
 
hub

hub

nicht ganz neu hier

Moin moin,
sorry - war halt nur ein Lösungsansatz.
Von deiner Art der Zuweisung solltest du dich trennen, wenn es flexibel werden soll und du auf eine Javascript-Steuerung verzichten willst.
Der wesentliche Teil nochmal mit einem Beispiel für Home:
CSS: 
/* für alle li im menu */
.nav li {
      float: left;
      padding-left: 25px;
      background-position: left top;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .nav li:hover {
      background-position: left top;
      background-repeat: no-repeat;
      background-size: contain;
    }
/* für class="home" im menu, die beiden also für jeden menu eintrag mit den entsprechenden bildern für jedes menu-element */
    .nav li.home {
        background-image: url(test.png);
    }
    .nav li.home:hover {
        background-image: url(test-hover.png);
    }
  /* hier wiederholt sich das für die anderen Einträge deines Menüs */

Gruß Ulli
 
K

Kiki McCloud

Guest

Danke Ulli! ^^ Tja, so is das halt wenn man wie ich eigentlich keine Ahnung von der materie hat und mit dem arbeiten muss was andrere einem zurechtmuckelt. ;-)
Ohhh key... Ich seh schon, das wird noch ne Arbeit...
Jetzt muss ich aber glatt noch ne frage hinterherschicken:
Wie bekomme ich das jetzige Menü-System aus meiner Seite, ohne das es mir das ganze Layout zerschießt? (Sorry, bin halt echt Anfängerin ohne großes Know-how...)
 
hub

hub

nicht ganz neu hier

Jo, das ist eine Frage an die Glaskugel ...
ohne zu wissen, wie dein Php aussieht, welches dir das Menü generiert, wird es schwer.
Im Prinzip müssen die Links durch die Liste ersetzt werden:
Kiki McCloud schrieb:
<div class="page">
<a href="?page=kontakt" class="kontakt"></a>

<a href="?page=impressum" class="+impressum"></a>

<a href="?page=home" class="home"></a>
<!-- zu: -->
<ul ...
</ul>

<div class="headbanner"></div>
Zum Vergrößern anklicken....

Gruß Ulli
 
K

Kiki McCloud

Guest

Uff... Hab mal gewüllt, das müsste das Biest hier sein:

require("config.php");

function buildNavigation($navigation,$pictures){
$content = '<ul class="navigation">';
$class = "";
foreach($navigation as $name => $path){
$codename = explode('.',$path);
if ($_GET['page'] == $codename) $class = 'class="active"';

if ($pictures[$name] != "") $navitem = "<img src='./images/{$pictures[$name]}'>";
else $navitem = $name;

$content .= '<li id="nav-'.$name.'" '.$class.'>'
//. "<a href=\"javascript:eek:penPage('?page={$codename[0]}&ajax=true','content');\">{$navitem}</a>"
. "<a href=\"?page={$codename[0]}\">{$navitem}</a>"
. '</li>';
$class = "";
}
$content .= '</ul>';
return $content;
}

function getNamebyCode($pagecode, $navigation){
foreach($navigation as $name => $path){
$codename = explode('.',$path);
if ($codename[0] == $pagecode) return $name;
}
}


$PAGE = $_GET['page'];
if ($PAGE == ''){
$pagecode = explode('.',$_CONF['DEFAULTPAGE']);
$PAGE = $pagecode[0];
}

if (!isset($_GET['ajax']) || $_GET['ajax'] != 'true'){
$CONTENT = file_get_contents($_CONF['PAGEDIR'].$_CONF['MAINPAGE']);
} else {
$CONTENT = "###content###";
}

$PAGE_CONTENT = file_get_contents($_CONF['PAGEDIR'].$PAGE.'.html');

$CONTENT = str_replace('###navigation###', buildNavigation($_CONF['NAVIGATION'],$_CONF['NAVIGATION_PICS']), $CONTENT);
$CONTENT = str_replace('###content###', $PAGE_CONTENT, $CONTENT);
$CONTENT = str_replace('###title###', getNamebyCode($PAGE,$_CONF['NAVIGATION']).$_CONF['TITLESUF'], $CONTENT);

echo $CONTENT;

?>
 
hub

hub

nicht ganz neu hier

Mal eine Frage zwischendurch, hast du diesen Php-Code, so wie du ihn gepostet hast, schonmal getestet?
Ich habe dir mal die Funktion entsprechend umgeschrieben und getestet.
Die Klassen für li entsprechen meinem obigen Beispiel, also
puppen.html = <li class="puppen">
PHP: 
function buildNavigation($navigation,$pictures){
    $content = '<ul class="nav">';
    $class = "";
    foreach($navigation as $name => $path){
        $codename = explode('.',$path);

        $class = $codename[0];
        if ($_GET['page'] == $codename[0]) $class .= ' active';
        $content .= '<li class="'.$class.'">'
        . "<a href=\"?page={$codename[0]}\">{$name}</a>"
        . '</li>';
    }
    $content .= '</ul>';
    return $content;
}
Wenn du diese Funktion mit deiner vergleichst, solltest du sehen, was geändert ist ...
 
K

Kiki McCloud

Guest

naja, was heißt gestestet..
Ich ahbe es so bekommen wie es war udn es lief...
Bissher habe ich von dem php-dings immer die finger gelassen, weil ich davon ehct keinen blassen Schimmer habe...

Übrigens:
Ich habe jetzt eine funktionierende lösung gefunden!
Sicher programmiertechnisch nicht die eleganteste, aber sie funktioniert wenisgtens!

Also: meine navi sieht jetzet so aus:

<div class="page">

<a href="?page=home" class="home"></a>
<a href="?page=news" class="news"></a>
<a href="?page=puppen" class="puppen"></a>
<a href="?page=plush" class="plush"></a>
<a href="?page=wünsche" class="wunsch"></a>

<div class="headbanner"></div>
<div class="stoffbahn"></div>

<div class="main">

<div class="content">

<div class="content2" id="content">
###content###
</div>
</div>
</div>
</div>

und die "class"es für die menüpunkte jeweils so:

.news{
display:block;
overflow:hidden;
height:50px;
width:145px;
background-image:url('../images/news.png');
position: absolute;
top:190px;
left:15px;
z-index:9;
}

.news:hover {
background-image:url('../images/news2.png');
}

Wie jesahct, es gibt da sicher elegantere Lösungen, aber so funktioniert es udn zwar auch so, wie ich mir das gedacht hatte.

An dieser Stelle ein ganz dickes Dankeschön an alle, die sich hierfür jetzt den Kopf zermartert haben, ihr seit echt klasse!
 
hub

hub

nicht ganz neu hier

Der Html-Code, den du hier zeigst, ist der handgeschrieben oder ist es das, was dir Php ausgibt???
Deine Menü-Lösung, so wie du sie hier zeigst, könnte dich böse überraschen, wenn du den Browser mal zusammenschiebst.

So sieht der Php-generierte Code aus:

HTML: 
<ul class="navigation">
  <li id="nav-News" class="news">
    <a href="?page=news">News</a>
  </li>
  <li id="nav-Puppen" class="puppen active">
    <a href="?page=puppen">Puppen</a>
  </li>
  <li id="nav-Wünsche" class="wünsche">
    <a href="?page=wünsche">Wünsche</a>
  </li>
  <li id="nav-Kontakt" class="kontakt">
    <a href="?page=kontakt">Kontakt</a>
  </li>
  <li id="nav-Links" class="links">
    <a href="?page=links">Links</a>
  </li>
</ul>
 
K

Kiki McCloud

Guest

Ähm... handegeschrieben. Also so, wie er in der datei steht...
ah ok... also die klassen so lassen, aber anstelle meiern "Links"
dann deine auflistung, verstehe ich das richtig?
Ich probiers mal aus, vielen dank ^^
 
Zuletzt bearbeitet von einem Moderator:
K

Kiki McCloud

Guest

Das mit den Bildern funktioniert einwandfrei!
Aber: wenn ich den Text aus den Linsk nehme (denn den will ich ja nicht)
dann funktioniert der Link nicht mehr. Er scheint das Bild also nicht zu verlinken...

Edit:
Das einzige was Linktechnisch funzt ist das hier:

<li id="nav-Puppen">
<a href="?page=puppen" class="puppen" ></a>
</li>
 
Zuletzt bearbeitet von einem Moderator:
hub

hub

nicht ganz neu hier

Deine Links schrunpfen dann auf eine Größe von 0px. Ein möglicher Trick: ersetze den Text durch ein oder zwei &nbsp; (ein geschütztes Leerzeichen). Ob das klappt, musst du testen. Wenn nicht, dann geht das auch noch mit etwas Css.
 
K

Kiki McCloud

Guest

Also ich habs jetzet bei meiner Variante gelassen, weil es bisher funktioniert.
Trotzdem Danke für den tipp ^^

Edit:
Habe bei der listung noch ein paar "ul" eingefügt, sonst mahct der mir da punkte hin wo keine hingehören ^^
 
Zuletzt bearbeitet von einem Moderator:
ohjamaney

ohjamaney

Zuschauer

Also wenn Du noch so unerfahren bist, warum informierst Du dich nicht erst einmal über ein paar grundsätzliche Dinge?
Eine Navigation mit PHP kann man machen, ist aber in der Regel unnötiger Aufwand. Überhaupt setzt man PHP erst dann ein, wenn es darum geht etwas Funktionelles zu implementieren. Für eine animierte Navigation braucht man kein PHP. Das ist eher hinderlich.
Normalerweise behandelt man die Navigation wie eine Liste. Nichts anderes ist sie nämlich. Eine Liste mit Links. Dementsprechend sähe der HTML Code dazu so aus:
HTML: 
<ul>
<li><a href="#">Linkname oder Bilddatei</a></li>
<li><a href="#">Linkname oder Bilddatei</a></li>
<li><a href="#">Linkname oder Bilddatei</a></li>
</ul>

Auf die Bilder bzw das Verhalten der Bilder (Effekte etc) greifst Du dann per CSS über die Eigenschaften des "a-Tag" zu.
Wenn sich zB beim Mouseover die Farbe ändern soll
CSS: 
a:hover {
color:red;
}

Die Listenelemente "li" lassen sich auch noch manipulieren, ebenso der Listen-Container "ul". Mit CSS3 sind der Gestaltung und dem Verhalten einer Navigation fast keine Grenzen gesetzt. PHP steht dir dabei nur im Weg!

Welche Änderung soll eigentlich bei einem Mouseover eintreten? Wenn Du tatsächlich ein bestimmtes Bild gegen ein anderes bestimmtes Bild pro Link austauschen willst würde ich für den Austausch eine PHP-Funktion schreiben und diese im a-Tag mit Übergabeparameter aufrufen.
Zum Beispiel: (ungetestet, rein theoretisch)
HTML: 
<li><a href="#"><?php function picChange('link1') ?></a></li>

Ps.: Wenn Du Code einfügst nutze bitte im Editormenü die Funktion "Einfügen..." ->Code
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 96 (Mitglieder: 4, Gäste: 92)
Robots: 913

Statistik des Forums

Themen
118.620
Beiträge
1.538.374
Mitglieder
67.544
Neuestes Mitglied
janusbarman
Oben