4. Ganze Seite = Link (also egal wo ich hinklicke)

Ganze Seite = Link (also egal wo ich hinklicke)

  • S

    Ja, "Computed" sind folgende Werte für das a-Tag:

    width	1680px
height	1020px
top	-234px
right	0
bottom	234px
left	0

    MfG SideWinder

    0

  • Firefox unterstuetzt eine Groessenaenderung von <a> -Tags nicht. Projiziere diese Styles bitte auf das <img> -Tag. Und versuch' mal auf position: fixed; zu verzichten. Probier's stattdessen mit position: absolute; und dann auch ohne display: block; . Dafuer musst du dann nat. left und top setzen.

    0

  • Mal als Beispiel eines 100% skalierten Bildes mit Link, statisch:

    <body style="width:100%;height:100%;margin:0px 0px 0px 0px;overflow:hidden;">
<div style="position:absolute;top:0px;left:0px;width:100%;height:100%;margin:0px 0px 0px 0px;">
<a href="seite2.htm"><img style="border:none;width:100%;height:100%;margin:0px 0px 0px 0px;" src="bild.jpg"></a>
</div>
</body>

    Das Div ist hier als Zwischenelement, aus Kompatibilitaetsgruenden.

    0
  • S

    Kann das aber nicht ans img binden, da sonst das img ja je nach Auflösung des Users verzerrt wird - deswegen nutze ich ja supersized...

    MfG SideWinder

    0
  • S
    Mod

    Was spricht nochmal gegen onclick?

    0

  • SideWinder schrieb:

    Kann das aber nicht ans img binden, da sonst das img ja je nach Auflösung des Users verzerrt wird - deswegen nutze ich ja supersized...

    Alternativ kannst du auch das hier probieren, um Firefoxkonform zu bleiben:

    • GIF-Bild mit nur Transparenz anlegen (transparent.gif)
    • Eigentliches Bild ohne Link
    • Als letzte Ebene / letztes Element folgendenden Code:
    <div style="position:absolute;left:0px;top:0px;margin:0px 0px 0px 0px;width:100%;height:100%;">
<a href="seite2.htm">
<img style="border:none;width:100%;height:100%;" src="transparent.gif" alt="">
</a>
</div>

    Ich empfehle dann auch im Body-Tag style="width:100%;height:100%;" einzusetzen, da das sonst wiederum z.B. unter Opera Probleme bereiten koennte.

    0
  • S

    Shade Of Mine schrieb:

    Was spricht nochmal gegen onclick?

    onclick wirkt auch nicht, weder im div noch im img. Seht's euch mal online an:
    http://www.onemillionflavours.com/ Evtl. seht ihr einen anderen Fehler...

    Wenn ihr links oben eine der drei Kategorien auswählt und dann ein Projekt öffnet geht es in jedem Browser, dass man klickt und auf das nächste Bild bzw. am Ende wieder zur Kategorienübersicht kommt. Einzig und allein im FireFox will's nicht klappen...

    @heini: Ein Bild, dass ich über alles drüber lege verhindert dann wieder einen Klick im Menü 😞

    MfG SideWinder

    0

  • Nunja, aber nach wie vor unterstuetzt Firefox keine Groessenaenderung von <a> -Tags. Noch dazu stoert sich Firefox des oefteren an position:fixed; bei Objekten. Bin daran selbst schonmal verzweifelt. Also evtl. Mein besagtes Element nicht ganz hinten dran, sondern sozusagen als zweite Schicht, jedenfalls ueber dem Bild, aber hinter dem Menue. Du kannst hierbei auch ein bischen mit z-index (CSS) herumspielen. Setz' z.B. das Div-Objekt des Menues auf 10 und das des Bildes auf 0 (oder umgekehrt?); mein Teil bekaeme dann z.B. die 5.

    0
  • S
    Mod

    wrapper liegt ueber supersized und verhindert dass der click durch geht.

    Wenn du wrapper kleiner machst und dafuer overflow:visible dann hats der firefox geschluckt bei mir.
    oder eben du setzt onclick auf den wrapper 😉

    PS:
    wrapper sieht auf den 1. Blick komisch aus - aber ich habe mich damit nicht weiter befasst im moment. wozu genau brauchst du denn wrapper ueber die ganze seite?

    0
  • S

    wrapper ist so in den supersized.js-Demos ( http://buildinternet.com/project/supersized/ ) enthalten.

    Wenn ich wrapper die 100% height/width nehme und overflow:visible mache geht bei mir ein Klick immer noch nicht. Im IE und im Opera geht alles weiterhin perfekt, im Firefox wandert mein Busy-Anzeiger nach links-oben und die Klicks wollen immer noch nicht 😞

    @heini: Das klingt mir zu sehr nach "hacking". Ich dachte eigentlich immer FireFox ist der "clenste" Browser. Was ist da los? 😞

    MfG SideWinder

    0

  • Tja, die HTML-Standards werden von so vielen Browsern unterschiedlich unterstuetzt, und die clientseitigen Skriptsprachen sowieso. Das ist da los. Sowie IE und Opera auf ihre Weise die Standards nicht erfuellen, tut's auch Firefox an einigen Stellen.

    Das mit dem z-index ist allerdings keineswegs Hacking oder etwas aehnliches. Das dient viel mehr dazu, Objekte auch dann in korrekter Reihenfolge zu behalten, wenn sie evtl. an unpassender Stelle im HTML-Code stehen. Das wuerde in dem Moment helfen, wo du sagst, dass dein Menue dann nicht bedienbar waere. Setzt du dein Menue auf den hoechsten (oder niedrigsten; wie rum weiss ich im Moment nicht) Wert, bleibt es immer an erster Stelle stehen.

    0
  • S

    @heini: Hättest du Lust es noch einmal anzusehen? Das wrapper-DIV ist jetzt mit dem höchsten z-index ausgerüstet und in Zeile 58 habe ich noch ein onclick eingebaut. Verstehe nicht warum das nicht geht 😞

    Habe entdeckt, dass es im Safari auch nicht funktioniert.

    MfG SideWinder

    0

  • Schau's mir heute Abend mal genauer an, werde lokal ein bischen herumspielen und mal sehen, was ich da machen kann. Sollte doch zu schaffen sein.

    Waehrend dessen kannst du noch probieren dem wrapper nicht den hoechsten, sondern den dritthoechsten z-index zu verpassen. Darueber sollte der Link und das Bild liegen, und noch darueber entspr. das Menue. Vllt. ist das sogar schon die Loesung. Ansonsten bis nachher. 😉

    0
  • J

    Ohne mir alles durchgelesen zu haben oder mir das jetzt genauer angesehen zu haben, eben schnell den Standardreflex für IE/FF-Unterschied bzgl. Seite überdecken:

    Beim IE kann man durch ein 100%ig transparentes Irgendwas 'durchklicken', beim FF ist das Irgendwas trotz völliger Unsichtbarkeit da und fängt die Klicks ab.

    Vielleicht hilft das schon um den Fehler zu finden.

    0

  • Vllt. haettest du doch besser alles durchgelesen, denn genau das kam schon auf und genau das ist aktuell die Sache, an der gefummelt wird. z-index wird hier wohl die Loesung sein, vermute ich nach wie vor, und darum werd' ich mich nachher mal kuemmern, herauszufinden, was hier noch verstellt werden muss.

    Meine Ueberlegung waere, schichtmaessig, folgende:

    == BENUTZER ==
[z-index 10] Menue
[z-index 5] Link / Bild
[z-index 0] Wrapper
    0

  • So, ich habe nun folgendes ergruenden koennen: Der wrapper umschliesst das ganze Menue und das laesst sich so leicht nicht trennen (ich muesste an den CSS Dateien herumpfuschen). Aber: Die Div-Objekte, die das Bild anzeigen, kannst du einfach mit in den Wrapper setzen, hinter dem Menue, und dann die Eigenschaft z-index per style="" verteilen: Die Menues und Contents des Menues muessen dabei hoeher liegen als der z-index des Divs, welches das Bild laedt. Eigtl. musst du die Ausgabe der Bilder dann nur ans Ende des Wrappers lenken, statt dahinter. So funktioniert's bei mir.

    Beispiel: Meine lokale Datei, also die Verweise entsprechend anders:

    <html lang="de"><head>

<meta charset="utf-8"><link rel="stylesheet" href="http://www.onemillionflavours.com/Content/StyleSheet.css">
	<script type="text/javascript" src="http://www.onemillionflavours.com/Scripts/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="http://www.onemillionflavours.com/Scripts/jquery.blockUI.js"></script>
	<script type="text/javascript" src="http://www.onemillionflavours.com/Scripts/supersized.3.0.mod.js"></script>
	<title>
	VICTORIA TANCZOS
</title>
	<script type="text/javascript">
        /* Supersized */
		$(function() {
			$.fn.supersized.options = {
				startwidth: 1400,
				startheight: 850,
				vertical_center: 1,
                slideshow: 0,
                navigation: 0,
                thumbnail_navigation: 0,
                transition: 0,
                pause_hover: 0,
                slide_counter: 0,
                slide_captions: 0,
                slide_interval: 3000,
				slides : [
					{image : 'http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_01.jpg', url : '/Project/Portfolio/2'},
                    {image : 'http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_01.jpg', url : '/Project/Portfolio/2'} /*necessary*/
				]
			};
	        $('#supersized').supersized();
	    });

        /* Block UI until image is loaded */
        $(document).ready(function() {
            if(!($('#image').completed)) {
                $.blockUI.defaults.css = {};
                $('div#busy').block({
                    message: '<div><img src="http://www.onemillionflavours.com/Content/Busy.gif" style="width:32px;height:32px"/></div>',
                     showOverlay: false
                });

                /* Unblock UI when image is loaded */
                $('#image').load(function() {
                    $('div#busy').unblock();
                }).each(function() {
                    if(this.complete) {
                        $(this).trigger('load'); /* Firefox doesn't trigger load if image has been in cache */
                    }
                });
            }
        });

        /* Preload next image after loading has been finished */
        $(window).load(function() {
            $('<img/>')[0].src = 'http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_02.jpg';
        });

        /* Next image function for Firefox 3.6 (doesn't work...) */
        $('#wrapper').click(function() {
            window.location = 'http://www.onemillionflavours.com/Project/Portfolio/2';
        });
	</script>

</head><body style="background-color: rgb(0, 0, 0);">
	<div id="wrapper" style="z-index:1;">
        <div id="abovemenu" style="z-index:10;"><img src="http://www.onemillionflavours.com/Content/WhiteEdge.png" alt="White edge"></div>
		<div id="menu" style="z-index:9;">

<ul>

        <li><a href="http://www.onemillionflavours.com/Project/Portfolio/Illustration">Illustration</a></li>

        <li class="active"><a href="http://www.onemillionflavours.com/Project/Portfolio/GraphicDesign">Grafik Design</a></li>

        <li><a href="http://www.onemillionflavours.com/Project/Portfolio/Photography">Fotografie</a></li>

</ul>
<a href="http://www.onemillionflavours.com/Project/Portfolio/About"><img src="http://www.onemillionflavours.com/Content/Logo.jpg" alt="Logo"></a>
<h2>Portfolio</h2>
<h3></h3>
<p>Aufgeteilt in analog und digital erstellte Projekte bietet das zweiseitige Portfolio nicht nur einen Überblick, sondern stellt auch selbst ein Konzept mit künstlerischem Anspruch dar.</p>

<div id="nav_previous" style="z-index:8;">
&lt; <span style="text-decoration: line-through;">previous</span>
</div>
<div id="nav_next" style="z-index:7;">
<a href="http://www.onemillionflavours.com/Project/Portfolio/2">next &gt;</a>

</div>
		</div>
        <div id="content" style="z-index:6;">

        </div>
        <div id="busy" style="z-index:5;">
        </div>
    <div style="z-index:4; display: block; width: 1920px; height: 1165.71px;" id="supersized">
<a style="width: 1920px; height: 1165.71px; left: 0px; top: -131.5px;" href="http://www.onemillionflavours.com/Project/Portfolio/2">
<img src="http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_01.jpg"></a></div>
    </div>
</body></html>
    0
  • S

    Danke heini, vielen Dank.

    Ich muss jetzt aber zugeben noch eine wesentlich einfachere Möglichkeit gefunden zu haben 😞

    Ich musste das Attachen des Listeners:

    /* Next image function for Firefox 3.6 */
            $('#wrapper').click(function() {
                window.location = '<%= ViewData["NextUrl"] %>';
            });

    schlichtweg in ein document.ready packen, vorher scheint das DIV bei FireFox noch nicht im DOM zu sein 😞

    Tut mir jetzt sehr leid, dass es da so eine einfache Lösung gibt und du dich so lange gespielt hast. Trotzdem vielen Dank! Du stehst auf meiner Top-List 🙂

    MfG SideWinder

    0
  • P

    Hallo,

    das ist sinn und zweck der ready() funktion :). Wenn das DOM-Baum noch nicht aufgebaut ist aber deine Event-Registierung schon greifen soll, kann das einfach ziemlich in die Hose gehen.

    Aber wenn es jetzt funktioniert passt ja alles ;).

    Hab dir mal was rausgekramt: http://www.mediaevent.de/javascript/event_listener.html

    0
Anmelden zum Antworten