ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » Mousovereffekt funzt nicht!

Geschlossen
  1. Mi. 28.10.2009 13:22 Uhr #1
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Hallo Zusammen,

    kurze Frage ich möchte einen Mouseovereffekt in eine Seite integrieren, leider stelle ich mich anscheinen zu dumm an!

    es soll wie dieser Effekt funktionieren, bitte über die einzelnen Siluetten mit der Mouse gehen!

    [url]www.Tapier-Tattoo.de[/url]

    Leider bekomme ich das nicht hin!

    Mein angepasster Code:
    ZitatZitat

    <div align="left"><a href="http://quipumedia.de/preview/tattoo_bilder/tapier/norris/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image09','','externer Link"><img src="http://www.tapier.kilu.de/include/images/gallery/norris_over.gif" alt="Norris" width="136" border="0" height="200"></a></div>


    bitte diesen Link folgen zur TESTHOMPAGE

    Vielen Dank

    Chewbacca


    verwendete ilchClan Version: 1.1

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. Mi. 28.10.2009 14:51 Uhr #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    -> 'Image09','hier der link zum mouseover','hier der link zum bild'

    Du hast da was frei gelassen in deinem Code, es muss so wie oben sein, natürlich dann mit Links zu den Bildern.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  3. Mi. 28.10.2009 15:58 Uhr #3
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Hallo Mairu,

    ZitatZitat
    <td width="136" height="200"><a href="http://quipumedia.de/preview/tattoo_bilder/tapier/norris/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image09','','externer Link"><img src="http://www.tapier.kilu.de/include/images/gallery/norris_over.gif" alt="Norris" name="Image09" width="136" height="200" border="0" id="Image09" /></a></td>


    so sieht es momentan bei mir aus! Leider wird so nicht das graue bild zuerst gezeigt und per mousover dann in vollem Glanz!;)

    Grüße

    Chewbacca
    0 Mitglieder finden den Beitrag gut.
  4. Mi. 28.10.2009 19:11 Uhr #4
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Also nochmal, was zuerst angezeigt wird, dass ist bei img src zu hinterlegen, bei dem MM_swapImage( müssen beide Bilder angegeben werden, also ist eins doppelt, in welche Reihenfolge weiß ich nicht genau, aber das kannst du doch leicht testen.

    Also entweder 
    <td width="136" height="200"><a href="http://quipumedia.de/preview/tattoo_bilder/tapier/norris/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image09','http://www.tapier.kilu.de/include/images/gallery/norris_over.gif','www.tapier.kilu.de/include/images/gallery/norris_normal.gif',1)"><img src="www.tapier.kilu.de/include/images/gallery/norris_normal.gif" alt="Norris" name="Image09" width="136" height="200" border="0" id="Image09" /></a></td>


    oder so 

    <td width="136" height="200"><a href="http://quipumedia.de/preview/tattoo_bilder/tapier/norris/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image09','www.tapier.kilu.de/include/images/gallery/norris_normal.gif','http://www.tapier.kilu.de/include/images/gallery/norris_over.gif',1)"><img src="www.tapier.kilu.de/include/images/gallery/norris_normal.gif" alt="Norris" name="Image09" width="136" height="200" border="0" id="Image09" /></a></td>
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  5. Do. 29.10.2009 10:12 Uhr #5
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Hallo Mairu,

    tut mir leid aber er macht nicht den Mouseover! Ich habe jetzt schon alle Varianten durch!
    Es bleibt immer das Bild bestehen, welches unter img src= eingetragen ist!

    Was bedeutet die 1 in der MM_swapImage Klammer am Ende?

    Was ist eigentlich damit gemeint?

    name="Image09"
    id=Image09"

    Ich habe im Netz auch ein Mouseovergenerator gefunden, selbst der bekommt es nicht hin, obwohl ich dort alle angaben machen kann 1. erstes Bild, 2. zweites Bild und 3. zu welcher Adresse!

    :'(

    Chewbacca
    0 Mitglieder finden den Beitrag gut.
  6. Do. 29.10.2009 11:13 Uhr #6
    User Pic
    Rock@wulf Hall Of Fame
    Registriert seit
    03.06.2004
    Beiträge
    3.282
    Beitragswertungen
    239 Beitragspunkte
    OMFG

    Leute fügt mal die Funktion ein ein aufruf eines JS scriptes sollte es auch das script geben ^^
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
  7. Do. 29.10.2009 11:27 Uhr #7
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    da ich leider mir alles selbst aneigne, fehlt mir natürlich auch eine Menge wissen, kommt halt alles peu à peu!

    ZitatZitat
    Leute fügt mal die Funktion ein ein aufruf eines JS scriptes sollte es auch das script geben ^^

    Was meinst du damit?

    Grüße

    Chewbacca
    0 Mitglieder finden den Beitrag gut.
  8. Do. 29.10.2009 13:03 Uhr #8
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Naja du hast dir wahrscheinlich was zusammengesucht und hast es dann nichtmal, davon war ich natürlich nicht ausgegangen, dann können wir es eh gleich anders machen, ich hab ne viel hübschere Variante geschrieben für Mouseover die auf jquery basiert. 

    <script type="text/javascript" src="scripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//Mouseover für mosrc Attribute bei Bildern
		var mosrcFn = function (){
			var el = $(this);
			var src = el.attr('src');
			el.attr('src', el.attr('mosrc'));
			el.attr('mosrc', src);
		};
		$("img[mosrc]").hover(mosrcFn, mosrcFn);
	});
	$(window).load(function() {
		//Bilder von Mouseovern vorladen
		$("img[mosrc]").each(function() {
			var img = new Image();
			img.src = $(this).attr('mosrc');
		});
	});
</script>


    Das müsste in den Kopf deines HTML ok, du kannst es auch einfach an den Anfang von deiner Content Datei setzen, aber im Grund sollte es in die index.htm des Designs oder halt mit $design->addheader('...'); eingefügt werden.

    Auf jeden Fall kannst du dann einfach <img src="hier der pfad zum bild" mosrc="hier der pfad zum mouseover" alt="bild" /> verwenden für Mouseover, das sieht dann viel aufgeräumter aus, finde ich.

    Du musst dabei natürlich ggf. den Pfad und den Namen der jquery_xxx.js anpassen, wie du es eben bei dir einrichtest.


    Zuletzt modifiziert von Mairu am 29.10.2009 - 13:05:49
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  9. Fr. 30.10.2009 16:23 Uhr #9
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Danke

    Ich probier es!
    0 Mitglieder finden den Beitrag gut.
  10. Mo. 02.11.2009 09:17 Uhr #10
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Guten Morgen Mairu,

    so ich habe es jetzt mal probiert, leider bekomme ich es nicht hin!

    den Code habe ich direkt in den Bereich eigene Seite eingegeben: 
    <script type="text/javascript" src="include/includes/xajax_js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //Mouseover für mosrc Attribute bei Bildern
        var mosrcFn = function (){
            var el = $(this);
            var src = el.attr('src');
            el.attr('src', el.attr('mosrc'));
            el.attr('mosrc', src);
        };
        $("img[mosrc]").hover(mosrcFn, mosrcFn);
    });
    $(window).load(function() {
        //Bilder von Mouseovern vorladen
        $("img[mosrc]").each(function() {
            var img = new Image();
            img.src = $(this).attr('mosrc');
        });
    });
</script>
<img src="http://www.tapier.kilu.de/include/images/gallery/norris_normal.gif" mosrc="http://www.tapier.kilu.de/include/images/gallery/norris_over.gif" alt="bild" />


    ich bekomme zwar das normale Bild angezeigt, jedoch nicht das Mousover!

    Ich habe es auch mit der Index.htm probiert.
    Ich habe den code direkt nach dem <head> eingesetzt. 
    ...
<head>
<script type="text/javascript" src="include/includes/xajax_js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //Mouseover für mosrc Attribute bei Bildern
        var mosrcFn = function (){
            var el = $(this);
            var src = el.attr('src');
            el.attr('src', el.attr('mosrc'));
            el.attr('mosrc', src);
        };
        $("img[mosrc]").hover(mosrcFn, mosrcFn);
    });
    $(window).load(function() {
        //Bilder von Mouseovern vorladen
        $("img[mosrc]").each(function() {
            var img = new Image();
            img.src = $(this).attr('mosrc');
        });
    });
</script>

    ...und dann den Code in eigene Seite erstellen angegeben: 
    <img src="http://www.tapier.kilu.de/include/images/gallery/norris_normal.gif" mosrc="http://www.tapier.kilu.de/include/images/gallery/norris_over.gif" alt="bild" />


    Ich bitte nochmal um einen Denkanstoß

    Danke

    Chewbacca


    Zuletzt modifiziert von Chewbacca am 02.11.2009 - 09:19:04
    0 Mitglieder finden den Beitrag gut.
  11. Mo. 02.11.2009 09:56 Uhr #11
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Ich denke das Problem ist, dass du es 2 mal eingefügt hast, und dadurch alles beim alten bleibt wenn du mit der Maus über ein Bild fährst, also du darfst den Code, den ich dir gegeben haben nur einmal einfügen, also dort im Head bereich des index.htm ist ok, nimmst dort raus, wo du das Bild hast.


    Zuletzt modifiziert von Mairu am 02.11.2009 - 12:10:39
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  12. Mo. 02.11.2009 10:57 Uhr #12
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Guten Morgen Mairu,

    du hattest mal wieder recht gehabt! Dadurc, dass es eine Dopplung war ging es nicht! Ich habe dies jetzt geändert!

    so....jetzt wollte ich das ganze natürlich mit einem Link versehen, dachte mir, dass es so funktioniert: 

    <url=http://www.tapier.kilu.de/index.php?gallery-1><img src="http://www.tapier.kilu.de/include/images/gallery/norris_normal.gif" mosrc="http://www.tapier.kilu.de/include/images/gallery/norris_over.gif" alt="bild" /></url>


    wie zu erwarten war - Pustekuchen! Wo ist denn da mein Denkfehler?

    Grüße

    Chewbacca
    0 Mitglieder finden den Beitrag gut.
  13. Mo. 02.11.2009 11:13 Uhr #13
    User Pic
    Chapter Hall Of Fame
    Registriert seit
    21.10.2007
    Beiträge
    5.951
    Beitragswertungen
    229 Beitragspunkte
    #off topic

    hey. also das design der seite würde ich ändern. das hat mit tattoo irgendwie nix zu tun. die idee vom aufbau her find ich gut, aber das design nicht. bau vielleicht ein paar motive ein oder so

    wenn du hilfe brauchst, meld dich per pm
    Spamming, sinnlose Beiträge, Pushing, Doppelposting und Werbung sind verboten
    externer Link
    0 Mitglieder finden den Beitrag gut.
  14. Mo. 02.11.2009 12:10 Uhr #14
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Ein Link wird so angegeben 
    <a href="http://adresse.de">Inhalt/Bild</a>
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  15. Mo. 02.11.2009 12:27 Uhr #15
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Mairu for President!

    vielen Dank mal wieder! man, man, man das eine Problem gelöst kommt das nächste! so jetzt habe ich mit deiner Hilfe alles hinbekommen!

    Jetzt ist aber bei dem Bild ein Rahmen! Warum bzw. wie bekomme ich den weg und wie bekomme ich die Farben weg, wo Links hinterlegt sind?

    EDIT: den Rahmen habe ich hinbekommen, leider die Farbe der Links noch nicht!

    Danke nochmal

    Chewbacca


    Zuletzt modifiziert von Chewbacca am 02.11.2009 - 12:43:47
    0 Mitglieder finden den Beitrag gut.
  16. Mo. 02.11.2009 15:09 Uhr #16
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Wenn du die Farbe aller Links auf deiner Seite ändern willst, dann in der style.css deines Designs, folgendes einfügen (oder ggf. vorhandenes ändern) 

    a {
  color: #FARBCODE;
}
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  17. Mo. 02.11.2009 15:42 Uhr #17
    User Pic
    Chewbacca Mitglied
    Registriert seit
    07.02.2009
    Beiträge
    137
    Beitragswertungen
    0 Beitragspunkte
    Hallo Mairu,

    ich denke das war es dann erstmal! Vielen Dank!

    Grüße

    Chewbacca
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Fehlersuche und Probleme

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten