• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Website mit Bildern

M

max8995

Neues Mitglied
Also ich hab folgendes Problem ich mache gerade für unsere Schule so als ein kleines versuchs Projekt einen virtuellen Rundgang. Jetzt hab ich ein Bild in eine normale HTML Dokument eingefügt und mit einer USEMAP versehen. D.h. wenn man auf eine Tür klickt kommt man dort rein. Jetzt wollt ich wenn ich z.B über ein Saalschield mit der Maus fahre das dieses vergrößert dargestellt wird. Nicht als Pop UP sonder wie z.B bei Ebay. Dort steht "vergrößern" wenn man dort mit der Maus drüber fährt wird das Bild größer jetzt wollt ich das nicht bei Text sondern bei einem Bild und nur bei einer oder mehrer Stellen.
Ist so etwas überhaupt möglich???? Wenn Ja wie??? Ich hab versucht etwas zu ergooglen fand einfach nichts wusste auch nicht richtig was ich eingeben soll.
 
ok das hilft mir auch nicht das ich nur ein Teil des Bildes vergrößern will aber trotzdem danke. Ich hoffe mir kann noch jemand helfen.
 
sowas kann man zB mit der jquery animate() -Funktion ganz gut machen.

Man muss aber immer ein bischen aufpassen, wenns um das Skalieren von Bildern im Browser geht - die sehen gern ein wenig dröselig aus, wenn die in einer anderen als der originalen Abmessung dargestellt werden. Da muss man manchmal in die Trickkiste greifen, wenn man von klein auf sehr gross animieren will.
 
bei Google fand ich jetzt fast nichts deutsches. Bist du sicher das das so funktioniert wie ich das möchte??? Kannst du vll. mal ein kleines Beispiel machen.
 
kleines Beispiel:
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">
<head>

    <title> jQuery animate </title>

    <style type="text/css">
    #cage {
        width:760px;
        margin:0 auto;
    }
    #cage img{
        width: 30%;
        height:30%;
    }
    </style>

    <!-- jQuery von extern laden -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <!-- jetzt der spass -->
    <script type="text/javascript">

      $(document).ready(function(){
      
        $('#cage img').hover(function(){
            $(this).stop().animate({
                'width' : '100%',
                'height' : '100%'
            });
        },function(){
                $(this).stop().animate({
                'width' : '30%',
                'height' : '30%'
            });        
        });
        
      });
    </script>

</head>

<body>

    <div id="cage">
        <img alt="" src="http://ursispaltenstein.ch/blog/images/uploads_img/national_geographic_wallpaper_1.jpg" /> 
    </div>

</body>
</html>
 
glaub nicht - die wird ja über ein einzelnes Bild gelegt und eigentlich kann ja man nur jeweils ein Bild animieren/skalieren...
Also muss man sich das so zusammenbauen,das es den gewünschten Effekt bringt.
Wenn du fit bist in html,css,js und/oder jQuery, plus Photoshop ist das aber durchaus möglich. ;)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben