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

Ganze Seite = Link (also egal wo ich hinklicke)

  • 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