tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von CPoly
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
249
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 15.10.11 17:13 #1
    Avatar von waswiewo
    waswiewo waswiewo ist offline Mitglied Gold
    Registriert seit
    Dec 2007
    Ort
    Detmold, Germany, Germany
    Beiträge
    114
    Hallo,

    ich habe ein Problemchen. Ich möchte ganz simpel das Hintergrundbild einer DIV-Box bei MouseOver & -Out ändern, habe dazu auch Tutorials und Workouts gelesen.

    Ich habe jetzt folgenden Code:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    $('#pic')
 
.mouseover(function(){
    
    $(this)
    
    .delay(500)
    .queue(function(){
        
        $(this)
        
            .css("background-image","url(/pico.png)")
            .dequeue();
            
    });
 
})
 
.mouseout(function(){
    
    $(this)
    
    .delay(100)
    .queue(function(){
        
        $(this)
        
            .css("background-image","url(/pic.png)")
            .dequeue();
            
    });
 
})

    Doch zu sehen ist gar nichts. Der Editor zeigt auch keinen Fehler an. Beim Testen (xampp-Server) ist im Browser auch nichts zu sehen. Auch keine W3C-Fehler.

    Woran kann es liegen?

    Ich habe die .js-Datei im Ordner "js" und die Bilder im ordner "img". beide Ordner sind im Mainordner mit der index.php.

    Bereits getestet (jeweils mit "...", '...' und ohne):

    Code :
    1
2
3
4
5
6

    url(pic.png)
url(/pic.png)
url(../pic.png)
url(../img/pic.png)
url(img/pic.png)
url(/img/pic.png)
    Geändert von waswiewo (15.10.11 um 17:15 Uhr)
     
    • MfG waswiewo
    Zitieren Zitieren
  2. 15.10.11 19:14 #2
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Funktioniert bei mir 1zu1. Der Fehler muss wo anders liegen (HTML, CSS).
     
    Zitieren Zitieren
  3. 16.10.11 18:02 #3
    Avatar von waswiewo
    waswiewo waswiewo ist offline Mitglied Gold
    Registriert seit
    Dec 2007
    Ort
    Detmold, Germany, Germany
    Beiträge
    114
    Und wie soll ich das herausfinden? Ich habe die css-Dateien, die js-Dateien, die Bilder, usw. alle in verschiedene Ordner ausgelagert. Das habe ich immer so gemacht. Nur kommt jQuery damit anscheinend nicht klar.

    habe bereits den Direktlink hingeschrieben.... nichts.

    Auch wenn ich...

    Code :
    1

    .css("background-image","none")

    ...hinschreibe, passiert nichts.

    Die .js-Datei habe ich einfach im <head> eingebunden. Muss ich den Browser nochmal speziell darauf hinweisen, dass er beim Hover die .js-Datei durchlaufen lassen soll? Eigentlich nicht, oder?

    Hier der html-Code:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

    <!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>
    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
<title>Uploader v1</title>
 
<link rel="stylesheet" type="text/css" href="css/style.css" />
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery-function.js"></script>
 
</head>
 
<body>
 
  <div id="inhalt">
      
      <a href="upload.php" title="Startseite"><img id="logo" src="img/logo.png" alt="" /></a>
      <div id="pic"></div>
      <div id="vid"></div>
      <div id="arch"></div>
      <div id="dat"></div>
 
    <form action="upload_lo.php" method="post" enctype="multipart/form-data">
 
    <label for="file">Bitte eine Datei ausw&auml;hlen:</label>
    <input id="file" type="file" name="datei" style="color: #e9a210" /><br /><br />
 
    <input type="submit" value="Hochladen" style="width: 550px;" /> 
 
    </form>
 
  </div>
 
</body>
 
</html>
    Geändert von waswiewo (16.10.11 um 18:14 Uhr)
     
    • MfG waswiewo
    Zitieren Zitieren
  4. 16.10.11 18:07 #4
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Zitat Zitat von waswiewo Beitrag anzeigen
    Und wie soll ich das herausfinden?
    Du könntest uns z.B. das ganze HTML Dokument zeigen und nicht nur den Code Ausschnitt.

    Zitat Zitat von waswiewo Beitrag anzeigen
    Die .js-Datei habe ich einfach im <head> eingebunden.
    Steht der Code in einem document.ready oder window.onload event-handler? Im head existiert "#pic" ja noch nicht. Aber ich nehme an, du hast getestet, ob die mouseover-Funktion überhaupt aufgerufen wird, oder?
    waswiewo bedankt sich. 
    Zitieren Zitieren
  5. 16.10.11 19:23 #5
    Avatar von waswiewo
    waswiewo waswiewo ist offline Mitglied Gold
    Registriert seit
    Dec 2007
    Ort
    Detmold, Germany, Germany
    Beiträge
    114
    Oh oh oh...

    document.ready war das Problem.... man man man

    Ich hatte es gestern noch drin stehen gehabt. Dämlich, dämlich...

    Danke für den Denkanstoß!
     
    • MfG waswiewo
    Zitieren Zitieren
« Verwendung von RegExp | select option abgleichen »

Ähnliche Themen

  1. Jquery - Jumping Image
    Von weedo im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 25.03.11, 19:13
  2. Image Carousel jQuery
    Von LeMarkus im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 06.12.10, 22:08
  3. jQuery und verlinkte Image Maps
    Von Peter Klein im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 02.05.09, 21:15
  4. Image Switch - jQuery
    Von Flextone im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 06.02.08, 14:25
  5. Backgound nicht wiederholen und zentrieren
    Von dermac'z im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 17.01.04, 18:33