Wie funktioniert das richtig? (events)

cesomark · 29 Juli 2011

Hallo!

Bin noch mehr oder weniger ein Anfänger was html und css betrifft.
Und nun habe ich eine frage zu events.

Und zwar möchte ich z.b. wenn ich mit der Maus über ein div gehe, dass sich das Hintergrundbild ändert oder die Hintergrundfarbe oder so.

Das ist mein Quellcode:

Code:

<div class="main" style="background-image:url(images/home_image.jpg)" onMouseover="background-image:url(images/videos_image.jpg)" >    
     Hier steht Text
</div>

Wie geht das richtig?

Danke schonmal im Vorraus :)

stvn · 29 Juli 2011

Das ist ganz einfach. :)

HTML-Code

HTML:

<div class="main">    
     Hier steht Text
</div>

CSS-Code

Code:

#main {background: url("http://www.html.de/images/home_image.jpg");}

#main:hover {background: url("http://www.html.de/images/home_videos_image.jpg");}

Du musst bei der URL zu den Bildern das "http://www.html.de/" rausnehmen, das wird hier nämlich irgendwie automatisch hinzugefügt. oO

cesomark · 31 Juli 2011

Danke! Hat wunderbar geklappt.

Wie sieht es denn aus mit mh.. ich weiß nicht genau wie das genau heißt aber ich nenne es mal verschachtelte events.

Hier der (pseudo-)code:

Code:

div.home:hover {
         body{background-color:#123456}
 }

Das soll heißen, dass wenn ich z.b. mit der Maus über ein bestimmtes div gehe, sich der Hintergrund der gesamten Seite anders färben soll.

Ich will so eine art Fotoalbum oder slideshow oder ähnliches machen.

Vielen dank im Vorraus!

threadi · 31 Juli 2011

Der body-Tag kann nicht innerhalb eines <div> vorkommen. Daher ist dein Beispiel von vornherein falsch.

Wenn Du ineinander verschachtelte Elemente ansprechen willst, schreib es so:

Code:

element1 element 2 { eigenschaften}

Beispiel:

Code:

li:hover ul { display: block; }

Siehe:
http://www.html.de/css/3750-css-eltern-selektor.html
http://www.html.de/css/34755-verschachtelte-selektoren-vorfahren-selektor-vater-selektor.html

cesomark · 31 Juli 2011

Vielen dank ich habe es ausprobiert und es klappt! :)
Mache mich dann mal an die Arbeit!

cesomark · 31 Juli 2011

Oh man.. jetzt klappt es doch nicht.. zumindest halb.

Das klappt:

Code:

#mainphotos {background-image:url(images/photos_image.jpg)} 
#mainphotos:hover div.bottom{background-color:#123345}

Aber das klappt nicht:

Code:

#bild_1:hover div.bottom{background-color:#123345}

Das bild_1 bezieht sich auf ein Bild das im Bildschirm angezeigt wird:

Code:

<img id="bild_1" src="images/1_min.jpg">

Ich will damit bewirken, dass wenn ich mit der Maus über das bild gehe, sich der Hintergrund von dem div.bottom verändert. Geht das etwa nicht mit Bildern?

threadi · 31 Juli 2011

Ein Bild kann kein Kind-Element haben und somit auch kein Elternelement sein. So kannst Du das folglich nicht schreiben, wird nie funktionieren.

cesomark · 31 Juli 2011

Habe es nun anders probiert und zwar habe ich ein neues Div erzeugt und als Hintergrund das Bild.. aber es klappt trotzdem nicht!!!
So.. jetzt versuch ichs mal genauer:

Das steht in meinem css-Quellcode:

Code:

div.bild {
         height:67px;
         width:100px;
         }


#bild_1 {background-image:url(images/1_min.jpg)}

#bild_1:hover div.bottom{background-color: #123456}

Und das ist mein Html-Quellcode:

Code:

<html>


<head>
         <title>Duett Muset</title>
         <link rel="stylesheet" type="text/css" href="style.css" />
         <title>Duett Muset</title>
         <meta name="author" content="Mark Cesovscikov">
         <meta name="editor" content="html-editor phase 5">
</head>


<body>


         <div class="main" id="mainphotos">
                 <div class="menue" style="background-color: rgba(22,3,116,0.7)">
                         <ul class="navigation">
                                 <li class="navi"><a href="home.htm">Home</a></li>
                                 <li class="navi"><a href="news.htm">News</a></li>
                                 <li class="navi"><a href="about_us.htm">About us</a></li>
                                 <li class="aktiv">Photos</li>
                                 <li class="navi"><a href="videos.htm">Videos</a></li>
                                 <li class="navi"><a href="kontakt.htm">Kontakt</a></li>
                         </ul>
                 </div>
                 <div class="content" style="background-color: rgba(100,149,237,0.5);">


                    <div class="bild" id="bild_1"></div>


                 </div>
                 <div class="bottom">
                 <img src="images/logo.png" style="margin-left: 560px; margin-top: 3px;">
                 </div>
         </div>


</body>


</html>

Und es klappt einfach nicht :/

threadi · 31 Juli 2011

Du hast scheinbar immer noch nicht das Eltern-Kind-Prinzip verstanden.

Du hast jetzt also folgenden CSS-Code:

Code:

#bild_1 {background-image:url(images/1_min.jpg)}

#bild_1:hover div.bottom{background-color: #123456}

Das setzt voraus, dass Du einen Elemente-Aufbau im HTML hast der so aussieht:

HTML:

<div id="bild1"><div class="bottom"></div></div>

momo95 · 1 August 2011

@cesomark: Das was du ereichen willst, geht wunderbar mit jQuery. Füge das mal in den Head ein:

HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#bild_1').hover(function () {
        $('#bottom').css({"background": "#123456"});
       }) });
    </script>

cesomark · 4 August 2011

Mhm.. klappt irgendwie nich momo.. schau mir im moment Tutorials zu jQuery an.. relativ kompliziert^^ java kann ich zwar aber das ist irgendwie schon was andres.. mhm mal gucken ob ichs hinbekomm!

Edit: sieht nicht so aus, dass ich es alleine hinbekommen würde.. ich sehe meinen Fehler nicht!

Naja schaut euch mal meinen Quellcode selber an: http://markceso.ma.funpic.de/MarkC/photos.htm

(Nach dem letzten div ist im Quellcode irgend etwas seltsames dass ich nicht selber geschrieben habe.. keine Ahnung wo das her kommt.)

momo95 · 4 August 2011

Also ich habe es probiert. Wie ich es im ersten Post geschrieben habe funktioniert es, nur das beim "heruntergehen" von #bild_1 das element #bottom blau bleit. So ist es hoffentlich, wie du es wünscht...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#bild_1').hover(function () {
        $('.bottom').css({"background": "#123456"});
            }, function(){
                $('#bottom').css({"background": "#ff0000"});
            });
        });    
</script>
<style>
.bottom {background: #ff0000;}
</style>
</head>
<body>
<div id="bild_1">Bild 1</div>
<div class="bottom">Bottom</div>
</body>
</html>

momo95 · 4 August 2011

Dein Fehler ist, dass #bottom eigentlih .bottom ist. Ich habe nicht gesehen, dass es eine class ist, sorry

So wie es oben (post 12) ist, müsste es stimmen.

cesomark · 4 August 2011

Es klappt! Danke dir!!!! Mhh aber der Fehler hätte auch mir auffallen müssen.. oh man^^

cesomark · 5 August 2011

Juhu die Gallerie ist fertig und so sieht sie aus wenns dich interessiert momo: http://markceso.ma.funpic.de/MarkC/photos.htm

Vielen dank!

Wie funktioniert das richtig? (events)

cesomark

Neues Mitglied

stvn

Neues Mitglied

cesomark

Neues Mitglied

threadi

Moderator

cesomark

Neues Mitglied

cesomark

Neues Mitglied

threadi

Moderator

cesomark

Neues Mitglied

threadi

Moderator

momo95

Mitglied

cesomark

Neues Mitglied

momo95

Mitglied

momo95

Mitglied

cesomark

Neues Mitglied

cesomark

Neues Mitglied

Neueste Beiträge