Antworten auf deine Fragen:
Neues Thema erstellen

mouseover

S

susiH

Aktives Mitglied

hi leute,

ich bastle gerade an einem neuen wordpresstheme und ich möchte, dass wenn man mit der maus über ein bild drüberfährt, an einer anderen stellen mehrere bilder auftauchen und wenn man klickt, sollen die stehen bleiben.

ich weiß nicht, ob sich jetz jeder vorstellen kann, was ich vorhabe. ich hoffe es ist nicht allzu umständlich erklärt.

danke schonmal für eure hilfe
 

S

susiH

Aktives Mitglied

AW: mouseover

ich habe mal ein bild dazu hochgeladen:



und zwar soll, wenn man mit der maus über das wort gestaltung fährt, sollen alle bilder, die nicht zu dieser kategorie gehören, mit einem anderen bild überlagert werden, damit man erkennt, welche dazu gehören und welchen nicht.

wenn man auf das wort klickt, sollen die überlagerten bilder stehen bleiben. und wenn man über das nächste wort fährt, sollen die bilder, die nicht zu dieser kategorie gehören von einem bild überlagert werden...
 
S

susiH

Aktives Mitglied

AW: mouseover

na immer genau über einem, welches nicht zu der kategorie gehört... also zum beispiel eine bild mit "not available" oder so...

und einen javascriptansatz habe ich noch nicht. sonst würde ich hier doch nicht reinschreiben :(
 
S

susiH

Aktives Mitglied

AW: mouseover

also es gibt ja diesen einfachen hover effekt, bei dem einfach die farbe oder der hintergrund eines buttons ändert. das wäre ja einfachen html

und dann gibt es ja noch den mouseovereffekt, bei dem sich zum beispiel ein bild ändert, wenn man darüber fährt.

nun will ich das aber so, dass sich mehrere bilder ändern, wenn ich über ein wort fahre.

ich weiß garnicht, wie ich das noch erklären soll. ich habe im netz auch noch kein passendes beispiel im netz gefunden
 
S

susiH

Aktives Mitglied

AW: mouseover

das wird ein wordpresstheme, deswegen sinds zwei codes

das ist die header.php
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'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archiv <?php } ?> <?php wp_title(); ?></title>
<!--wp title zeigt jetzt auch den blognamen an --->

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<!--das da braucht WP fuer die Kommentare-->
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<!--das nicht loeschen, plugins brauchen dies wie zb wpseo das ich empfehle-->
<?php wp_head(); ?>
</head>

<body>
<div id="gruen">&nbsp;</div>
    <div id="wrapper">
        <div id="header">
            <div id="headhanger"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/headhanger.png" /></div>
                <div id="logo">
                <?php echo '<a href="'. $logo. '/index.php"><img src="'. $logo. 'http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/logo.png"                                         border="0" alt="werkzwei" align="right"></a>'; ?> 
                   </div> 
                
                                
<!-- navigation -->
<div id="navigation">
<ul>
    <li><?php echo '<a href="'. $alles. '/alles.php"><img src="'. $alles. 'http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/alles.gif" border="" alt="alles" align=""></a>'; ?></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/gestaltung.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/werbung.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/druck.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/internet.gif" /></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li>
    <li><?php echo '<a href="'. $produkt. '/alles.php"><img src="'. $produkt. 'http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/produkt.gif" border="" alt="produkt a-b-c" align=""></a>'; ?></li>
    <li><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/trenner.gif" /></li>
    <li><?php echo '<a href="'. $kontakt. '/alles.php"><img src="'. $kontakt. 'http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/kontakt.gif" border="" alt="kontakt" align=""></a>'; ?></li>
</ul>
</div>

<!-- Suche -->
<div id="search">
<?php get_search_form(); ?>
</div>

                
</div> <!-- ende header-->

und das ist mein code des templates. der heißt bei mir alles.php wegen dem link vorne

HTML: 
<?php /* Template Name:alles */ ?>


<?php get_header(); ?>

<!--alles.php-->


<div id="alles">
    <div class="bilder">
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/1.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/2.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/3.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/4.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/5.png" />
</div>

    <div class="bilder">
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/6.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/7.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/8.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/9.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/10.png" />
</div>

    <div class="bilder">
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/1.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/2.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/3.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/4.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/5.png" />
</div>

    <div class="bilder">
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/6.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/7.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/8.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/9.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/10.png" />
</div>
    
    <div class="bilder">
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/1.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/2.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/3.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/4.png" />
<img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/5.png" />
</div>
</div>


<!--include footer-->
<?php get_footer(); ?>
 
Duddle

Duddle

Posting-Frequenz: 14µHz

AW: mouseover

Zum dritten Mal: wo ist dein Ansatz? Wie sieht dein Pseudocode aus? Wieviel JavaScript hast du schon geschrieben?


Duddle
 
S

SGAMaddin

Nicht mehr ganz neu hier

AW: mouseover

Also generell würde ich das mit sowas wie
Code: 
onMouseOver="document.getElementById('NAME').style.display='none'
versuchen damit kannst du beim MouseOver über z.B ein div oder einen link das Element mit dem Namen "NAME" ausblenden. Ich galube das gleiche gibt es auch mit getElementByClass (google einfach mal). Du kannst das ganze dann auch als eigene funtkion anlegen:
Code: 
<script type="text/javascript"> function showElement() { document.getElementById('NAME')="none"; document.getElementById('NAME2')="none"}</script>
So könntest du gleich mehrere auf einmal gezielt ausblenden. Solche Funktionen lassen sich mit onClick, onMouseOver und onMouseOut ganz gut ausführen. Aber ich denke in deinem Fall solltest du das getElementByClass mal ansehn...
 
Zuletzt bearbeitet:
Myhar

Myhar

Hat es drauf

AW: mouseover

SGAMaddin schrieb:
Aber ich denke in deinem Fall solltest du das getElementByClass mal ansehn...
Zum Vergrößern anklicken....

getElementByClass gibt es in Javascript nicht. Man kann das mittels getElementsByTagName in Kombination mit der Überprüfung der Elemente auf das class Attribut bewerkstelligen.
Aber um susiH zu helfen wäre es wirklich hilfreich zu sehen, was sie bis jetzt in JS programmiert hat. Sonst kann man nur raten, was wenig bis gar nicht sinnvoll ist.
 
S

susiH

Aktives Mitglied

AW: mouseover

ich habe für diese webseite noch garnichts mit javascript programmiert, weil ich nicht wusste, wo ich anfangen sollte. das einzige, was ich bisher mit javascript gemacht habe, war eine lightbox in meine webseite einzufügen
 
Duddle

Duddle

Posting-Frequenz: 14µHz

AW: mouseover

Ohne Eigenerfahrung wirst du nicht allzu viel damit anfangen können, aber ich habe mal ein Grundgerüst geschrieben, dass das Prinzip zeigt. Offensichtlich musst du die Pfade usw. an deine lokale Umgebung anpassen.

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">
	<head>
		<title>susiH</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" language="javascript" charset="utf-8">
			$(document).ready(function() {
				$("#tags li").hover(
					function() {
						//hover in
						var tag = $(this).html().toLowerCase();
						$("#thumbs img:not(."+tag+")").addClass("disable");
					}, function() {
						//hover out
						$("#thumbs img").removeClass("disable");
					}
				);

			});		
		</script>
		<style type="text/css" media="screen">
			.disable {
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<ul id="tags">
			<li>Design</li>
			<li>HTML</li>
		</ul>
		<hr>
		<div id="thumbs">
			<img src="img/1.png" class="design" />- design<br />
			<img src="img/2.png" class="html" />- html<br />
			<img src="img/3.png" class="design" />- design<br />
		</div>
	</body>
</html>


Duddle
 
Zuletzt bearbeitet:
S

susiH

Aktives Mitglied

AW: mouseover

ok ich habe einen ansatz....

in der header.php habe ich das eingefügt


HTML: 
<script type="text/javascript" src="austausch.js"></script>

ich weiß zwar noch nicht, ob das überhaupt extern liegen muss, aber es ist schon mal angelegt.

das bild, dass das den bilderwechsel auslösen soll, hat jetz diesen code.
HTML: 
<a href="#" onmouseover="bild1.src='http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/austausch.png';"><img src="http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/gestaltung.gif"/>

und das bild, welches sich ändern soll, hat diesen code
HTML: 
<?php echo '<a href="'. $flyer. 'http://www.cottbus-werbung.de/wordpress/flyer/"><img src="'. $flyer. 'http://www.cottbus-werbung.de/wordpress/wp-content/themes/werkzwei/images/vorschaubilder/1.png" name="bild1" border="0" alt="flyer"></a>'; ?>

ich hoffe, jemand kann damit was anfangen :':)'(
 
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: 226 (Mitglieder: 8, Gäste: 218)
Robots: 956

Statistik des Forums

Themen
118.565
Beiträge
1.538.065
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben