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

[Hilfe] Wordpress Css Bilder Hover

Seigetzu

Seigetzu

Neues Mitglied
Hallo zusammen,

Ich bräuchte mal eure hilfe für naja ich würde sagen ein für euch kleines Problem? ;)

Also ich möchte gerne in meiner Navigations Leiste Buttons mit Bildern machen,was ich bereits habe.
Dann möchte ich wenn jemand mit der Maus drüber fährt (mouse hover) das ein anderes Bild kommt, mein problem dabei ist ich weiss leider nicht, wie ich das in meiner header.php und style.css definieren muss da ich relativ unerfahren in sowas bin ;).

Ich hinterlasse euch mal mein Blog link die header.php, style.css und den Bilder vergleich.

Blog Link:

http://erogetzu.org/


Header.php:

http://pastebin.com/tJgHs5cR

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); if(get_bloginfo('name') != "") echo ' - ' ; bloginfo('name'); }
 elseif (is_single() ) { single_post_title(); }
 elseif (is_page() ) { bloginfo('name'); if(get_bloginfo('name') != "") echo ': '; single_post_title(); }
 else { wp_title('',true); } ?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" /> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="art-page-background-glare">
    <div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<div class="art-Sheet">
    <div class="art-Sheet-tl"></div>
    <div class="art-Sheet-tr"></div>
    <div class="art-Sheet-bl"></div>
    <div class="art-Sheet-br"></div>
    <div class="art-Sheet-tc"></div>
    <div class="art-Sheet-bc"></div>
    <div class="art-Sheet-cl"></div>
    <div class="art-Sheet-cr"></div>
    <div class="art-Sheet-cc"></div>
    <div class="art-Sheet-body">
<div class="art-Header">
    <div class="art-Header-png"></div>
<div class="art-Logo">
    <h1 id="name-text" class="art-Logo-name">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div id="slogan-text" class="art-Logo-text">
        <?php bloginfo('description'); ?></div>
</div>

</div>
<div class="art-nav" style="text-align: center;">
<div class="art-nav" style="top: 75px ; z-index: 1;">
<div class="option" style="text-align: center;">
<a title="Manga" href="http://erogetzu.org/"> </a><a title="Home" href="http://erogetzu.org/"><img src="http://erogetzu.org/wp-content/uploads/home.png" alt="Home">
<a title="Manga" href="http://erogetzu.org/?cat=4"> </a><a title="Anime" href="http://erogetzu.org/?cat=4"><img src="http://erogetzu.org/wp-content/uploads/anime.png" alt="Ecchi (Adult)">
<a title="Manga" href="http://erogetzu.org/?cat=6"> </a><a title="Games" href="http://erogetzu.org/?cat=6"><img src="http://erogetzu.org/wp-content/uploads/Games.png" alt="Ecchi (Adult)">
<a title="Manga" href="http://erogetzu.org/?cat=3"> </a><a title="Ecchi" href="http://erogetzu.org/?cat=4"><img src="http://erogetzu.org/wp-content/uploads/home.png" alt="Ecchi (Adult)">
<a title="Manga" href="http://erogetzu.org/?cat=3"> </a><a title="Ecchi" href="http://erogetzu.org/?cat=5"><img src="http://erogetzu.org/wp-content/uploads/home.png" alt="Ecchi (Adult)">
<a title="Manga" href="http://erogetzu.org/?cat=3"> </a><a title="Ecchi" href="http://erogetzu.org/?cat=6"><img src="http://erogetzu.org/wp-content/uploads/home.png" alt="Ecchi (Adult)">
<a title="Manga" href="http://erogetzu.org/?cat=3"> </a><a title="Ecchi" href="http://erogetzu.org/?cat=7"><img src="http://erogetzu.org/wp-content/uploads/home.png" alt="Ecchi (Adult)">
<a title="Manga" href="http://erogetzu.org/?cat=3"> </a><a title="Ecchi" href="http://erogetzu.org/?cat=8"><img src="http://erogetzu.org/wp-content/uploads/home.png" alt="Ecchi (Adult)">
</div>
</div>
</div>

<div class="art-bastard" style="text-align: center;">
<div class="art-bastard" style="top: 40px; z-index:3;">
<img src="http://erogetzu.org/wp-content/uploads/bastard.png" alt="Japan">
</div>
</div>


Style.css:
http://pastebin.com/cJAE2DhN

Bilder vergleich:

Kein Mousehover (weniger sichtbar):
mousehover.png


Mit Mousehover (voll sichtbar):
mousehover.png



Würde mich sehr über eure hilfe freuen ;)
 
Werbung:
Hast Du es schon hinbekommen? Im Kopfbereich deiner Seite sehe ich schon genau das was Du hier erfragst.
 
threadi schrieb:
Hast Du es schon hinbekommen? Im Kopfbereich deiner Seite sehe ich schon genau das was Du hier erfragst.
Zum Vergrößern anklicken....


Jup ich habs bissel anders gemacht ich werds sobald ich zeit habe hier reinposten wie einfach es doch eigentlich ist mit einem 2in1 Bild nen Hover Effekt zu bekommen.
Ich musste aber auch erstmal drauf kommen so nach 2h ;)
 
Werbung:
threadi schrieb:
Ja, sowas ist recht simpel wenn man es erstmal kapiert hat ;)

Dann kannste ja deinem Blog mal noch nen Seitentitel geben - der ist momentan leer.
Und da scheinen noch ein paar Schnitzer im HTML-Code zu sein:
[Invalid] Markup Validation of http://erogetzu.org/ - W3C Markup Validator
Zum Vergrößern anklicken....

Die Fehler die da angezeigt werden, sind aus den Wordpress Post's (die meisten).
Das kann eigentlich garnicht falsch sein da es direkt von youtube kopiert ist (der html einbettungs code), deshalb verstehe ich das nicht ganz^^ aber naja.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben