XHTMLforum - Bilder vorab laden, auf Wunsch anzeigen

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Bilder vorab laden, auf Wunsch anzeigen (http://xhtmlforum.de/showthread.php?t=38716)

Bilder vorab laden, auf Wunsch anzeigen

Hallo, ich versuche gerade ein paar Bilder mit CSS zu preloaden, die Bilder sollen durch Links sichtbar werden.
Da die Bilder alle am gleichen Ort angezeigt werden, darf immer nur genau das gerade angeklickte Bild sichtbar sein. Was ist denn dafür die beste Lösung ? Ich habe im Forum und in Google gesucht, aber die meisten Seiten beschäftigen sich nur mit Rollover-Menüs u.ä.

Aktueller Stand (mit PHP Code...)

Code:

<STYLE TYPE="text/css">

<!--

.versteckt {display:none;}

-->

</STYLE>



$menu_ = mysql_query( "SELECT obj_id, ansicht, lageplan, beschreibung,expose, standort FROM immo WHERE verkauf = 1 GROUP BY obj_id LIMIT $limit, 4");

    $menu = mysql_fetch_array($menu_);

    $sub = $menu['obj_id'];

    $grund_ = mysql_query( "SELECT bild FROM grundriss WHERE sub_id = '$sub' GROUP BY obj_id LIMIT $limit, 4");

    

    while ($grund = mysql_fetch_array($grund_))

    {

echo ("[img]".$images_dir."/".$grund[[/img]");

    }

Kennt jemand vielleicht ein gutes Tutorial oder so ?

Hallo Doc, danke für den Link, ist ein sehr nützlicher Thread.

Ich habe anhand der dort beschriebenen Galerie eine sehr reduzierte Version für meine Zwecke erstellt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="../definitionen.css">

<STYLE TYPE="text/css">

<!--

#preload img { 

   width: 280px; 

   height: 300px; 

   border: 0px;

}



#preload ul {

   list-style-type: none;

} 



#preload a span { 

   display: none; 

}



#preload a:focus, #preload a:active  { 

   border: 0px; 

} 



#preload a:focus span, #preload a:active span  { 

   position: fixed; 

   display: block; 

   top:10px;

   left:100px;

   z-index: 101; 

   border: 0px;

} 



-->

</STYLE>

<title>Galerietest</title>

</head>

<body>

<div id="preload">

<ul>[*]

<a href="#nowhere">

bild a

<span>

[img]images/ansicht_0.jpg[/img]

</span>

</a>

[*]

<a class="gallery slide_b" href="#nowhere">

bild b

<span>

[img]images/ansicht_1.jpg[/img]

</span>

</a>

[/list]</div>

</body>

</html>

Jetzt habe ich das Problem, daß der Internet Explorer die Angaben für die Position der Bilder völlig anders interpretiert als Opera und Firefox. Wie bekomme ich eine einheitliche Positionierung für alle Browser hin ?

Danke,
J.

Zitat:

Zitat von fuhrheiner

Jetzt habe ich das Problem, daß der Internet Explorer die Angaben für die Position der Bilder völlig anders interpretiert als Opera und Firefox.

Der IE kennt position:fixed nicht.
Ich denke, du meinst eher "absolute".

Hallo fricca, stimmt das hatte ich vergessen. Mit absolute habe ich aber das Problem daß die Anzeige des Bilds sich in der Höhe abhängig der Position des zugeordneten Links verschiebt.

Zitat:

Zitat von fuhrheiner

Mit absolute habe ich aber das Problem daß die Anzeige des Bilds sich in der Höhe abhängig der Position des zugeordneten Links verschiebt.

Verstehe nicht, was du meinst.

Naja - die zwei Bilder erscheinen nicht an einem absolut gleichen Punkt. Sondern das vom unteren Link ein klein wenig weiter unten als das vom oberen Link.

Zitat:

Zitat von fuhrheiner

Sondern das vom unteren Link ein klein wenig weiter unten als das vom oberen Link.

Bei mir nicht.
Und sollte auch nicht. position:absolute richtet sich nach dem letzten *positionierten* Elternelement. Da es in deinem obigen Code kein solches gibt, richtet sich die Position nach dem Viewport - genauso, wie vorher auch bei fixed.
Hast du top und left weggelassen?

OK, das war nicht die ganze Wahrheit. Das oben ist nur meine Testseite. Der Code wandert von da in ein vernünftiges Layout.....dort sieht die entsprechende Stelle so aus:

Code:

<?php

    

        $teil = ($entry-1)+(($page-1)*4);

    $menu_ = mysql_query( "SELECT obj_id, ansicht, lageplan, beschreibung,expose, standort FROM immo WHERE verkauf = 1 GROUP BY obj_id LIMIT $teil, 4");

    $menu = mysql_fetch_array($menu_);

    $sub = $menu['obj_id'];



        $sub_obj_ = mysql_query( "SELECT sub_id, titel, obj_id FROM sub_obj WHERE obj_id = $sub GROUP BY sub_id");



   echo ("<div id='preload'>");

    echo ("<ul id='umenu'>");

    echo ("[*]Ansicht<span>[img]".$images_dir."/".$menu[[/img]</span>");

    echo ("[*]Lageplan<span>[img]".$images_dir."/".$menu[[/img]</span>");



        while ($sub_obj = mysql_fetch_array($sub_obj_))

        {

          echo ("[*]$sub_obj[titel]");

          $grundid = $sub_obj['sub_id'];

          $grundinstanz = mysql_query("SELECT sub_id, bild, titel FROM grundriss WHERE sub_id = $grundid");

                        while ($grund = mysql_fetch_array($grundinstanz))

                            {

                                        echo ("[*]<a href='#nowhere'>Grundriss $grund[titel]

                                        <span>

[img]".$images_dir."/".$grund[[/img]

</span>

                                        </a>");

                                }    

        }



    echo ("[*]Expose (PDF)");

    echo ("[/list]");

   echo ("</div>");



?>

Zitat:

Zitat von fuhrheiner

dort sieht die entsprechende Stelle so aus:

Ich bin kein PHP-Parser.