HTML Website mit Bildern

html.de-Forum HTML, XHTML & CSS
1

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.

2

Ich kann dir da nicht wirklich helfen aber mit Java ist das denke ich mal möglich. Nur leider kann ich nur PHP, HTML und CSS. Aber ich hab mal einen Link rausgesucht hoffe der hilft :smiley:

Java Script / HTML - Mouseover - Bild größer - Forum - CHIP Online

3

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.

4

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.

5

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.

6

kleines Beispiel:
[html]

<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>

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

Das sieht ja ganz gut aus. Aber kann ich das jetzt noch mit einer USEMAP kombinieren???

8

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. :wink: