Beiträge von Rantanplan

Rantanplan

Hallo, hier der Demo-Link:

http://demo.comuf.com/Demo3.html
(komischerweise geht der link bzw bilder nur, wenn man es ohne www. eingibt, aber ist ja nur demo auf nem kostenlosen server, muss mir erst noch webspace kaufen)

nunja, hier der code dazu:

HTML

<!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" xml:lang="de" lang="de">


<head>
    <title>Titel</title>


    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />


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


<body>


       <div id="1">
     <style type="text/css">
        .imgStyle
        {
            width:141px;
            height:65px;
            border:1px solid white;
        }
        </style>
        <img id="mainImage" style="border:1px solid white"
        src="Bilder/Gallerie/00_1.jpg" height="240px" width="435px"/>
        <div id="divId" onclick="changeImageOnClick(event)">
        <BR><img class="imgStyle" src="Bilder/Gallerie/00_1.jpg">
        <img class="imgStyle" src="Bilder/Gallerie/00_2.jpg">
        <img class="imgStyle" src="Bilder/Gallerie/00_3.jpg">




   <script type="text/javascript">
        var images = document.getElementById("divId")
        .getElementsByTagName("img");
        for (var i = 0; i < images.length; i++)
        {
        images[i].onmouseover = function ()
        {
        this.style.cursor = 'hand';
        this.style.borderColor = 'red';
        }
        images[i].onmouseout = function ()
        {
        this.style.cursor = 'pointer';
        this.style.borderColor = 'white';
        }
        }


        function changeImageOnClick(event)
        {
        event = event || window.event;
        var targetElement = event.target || event.srcElement;
        if (targetElement.tagName == "IMG")
        {
        mainImage.src = targetElement.getAttribute("src");
        }
        }
    </script>
         </div>
       </div>










  </body>
</html>

Alles anzeigen

+diese gallerie kann ich aber nur einmal pro seite benutzen, möchte sie aber paar mal einsetzen. wenn ich das aber mache, laden alle thumpnails in ein und das selbe mainimage

- - - Aktualisiert - - -

http://demo.comuf.com/Demo4.html
diese könnte ich öfters pro seite benutzen, aber es ändert die bilder mit mausover, es soll aber erst mit mausklick links ändern:

HTML

<!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" xml:lang="de" lang="de">


<head>
    <title>Titel</title>


    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <script type="text/javascript" src="jquery-1.11.3.js"></script>




    <style type="text/css">
    .gallery {width: 435px; margin: 0px;}
    .gallery ul {width:435px; padding-left: 0px;}
    .gallery li {display: inline; margin-right:0px;}
    </style>


</head>


<body>




    <script type="text/JavaScript">
$(document).ready(function() {
    var galleryClass = '.gallery';
    $(galleryClass+' li img').hover(function(){
        var $gallery = $(this).parents(galleryClass);
        $('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    var imgSwap = [];
     $(galleryClass+' li img').each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>
</head>
<body>
<div class="wrap">


    <div class="gallery">
    <img width="435" height="200" src="Bilder/Gallerie/00_1.jpg" alt="" class="main-img" />


    <ul>
      <li><img width="142" height="65" src="Bilder/Gallerie/00_1.jpg" alt="" /></li>
      <li><img width="142" height="65" src="Bilder/Gallerie/00_2.jpg" alt="" /></li>
      <li><img width="142" height="65" src="Bilder/Gallerie/00_3.jpg" alt="" /></li>
    </ul>


</div>












</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

p.s. habe jetzt einfach den hover zu klick geändert und es geht. also problem gelöst. so einfach kanns sein. aber, rein für lernzwecke, wieso geht denn die eine gallerie nur einmal pro seite, selbst wenn ich die mainImage ID ändere?

Rantanplan

Wie kann ich diese Gallery öfters auf einer Seite benutzen? Wenn ich die einfach Kopiere und die Bilder bzw auch die ID ändere, laden die alle in das selbe mainImage

Code

<style type="text/css">


        .imgStyle
        {
            width:141px;
            height:65px;
            border:1px solid white;
        }
        </style>
        <img id="mainImage" style="border:1px solid white"
        src="Bilder/Slider/1.jpg" height="240px" width="435px"/>
        <div id="divId" onclick="changeImageOnClick(event)">
        <BR><img class="imgStyle" src="Bilder/Slider/1.jpg">
        <img class="imgStyle" src="Bilder/Slider/2.jpg">
        <img class="imgStyle" src="Bilder/Slider/3.jpg">
        </div>




    <script type="text/javascript">
        var images = document.getElementById("divId")
        .getElementsByTagName("img");
        for (var i = 0; i < images.length; i++)
        {
        images[i].onmouseover = function ()
        {
        this.style.cursor = 'hand';
        this.style.borderColor = 'red';
        }
        images[i].onmouseout = function ()
        {
        this.style.cursor = 'pointer';
        this.style.borderColor = 'white';
        }
        }


        function changeImageOnClick(event)
        {
        event = event || window.event;
        var targetElement = event.target || event.srcElement;
        if (targetElement.tagName == "IMG")
        {
        mainImage.src = targetElement.getAttribute("src");
        }
        }
    </script>


    </div>

Alles anzeigen

Rantanplan

Hallo Leute,

ich bin gerade dabei CSS zu lernen und habe mich mit den Positionen beschäftigt.
Soweit habe ich das Prinzip "verstanden".

Eine Frage habe ich aber: Wie ist der "ordentliche" (richtige) Code um ein Bild von der Mitte aus z.B. 40 PX Left zu schieben?
Muss ich dann ein Div Container zentrieren und im Div-Tag die genaue Pixelzahl "left" angeben? Kann mir jemand ein kleinen Beispielcode machen um es zu verstehen? Finde in Youtube ect nur direkte Zentrierung oder eben grobe links / rechts Plazierungen. Ich möchte aber eben (um das wirklich alles zu verstehen) wissen, wie ich eben auf den Pixel genau von der Mitte aus etwas positionieren kann.

Würde mich sehr freuen, wenn mir jemand ein Beispiel zeigen kann. (Zentrieren verstehe ich mit den 50% ect. (Wobei, ist doch eigentlich gleich, als wenn ich einen Div Tag mit align-center mittig setze, oder? Was ist da der Unterschied? Für die Screenerkennung bzw. Automaitsche anpassung?)) Na das eigentliche Lernziel ist eben das mit dem px genauen Arbeiten von der Seitenmitte aus (Oder Div-Tag/Mitte)

Also wäre so der "richtige" weg, oder ist dass nicht sauber bzw korrekt? (Funktioniert, aber wills ja anständig lernen. So muss man eben immer rechnen Also gehts auch anders?

Code

<style type="text/css">
        #container {
        width: 590px;
        height: 1000px;
        background-color: grey;
        margin-top: 50px;
        }
        #Header {
        position: absolute;
        width: 300px;
        hight: 100px;
        background-color: red;
        margin-top: 10px;
        margin-left: 140px;
        }


    </style>








</head>


<body>


   <div id="container">
   <!----------------->
        <div id="Header">


        Hallo Welt






        </div>
  <!----------------->
  </div>


</body>

Alles anzeigen

Rantanplan

sorry, kann gelöscht werden

Beiträge von Rantanplan

Gallary Mausklick

Gallary Mausklick

CSS Position

Bildergalerien mehrmals pro Seite benutzen