Anzeige

Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs

Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs | PSD-Tutorials.de

Erstellt von sumpfbarbe, 22.11.2009.

  1. sumpfbarbe

    sumpfbarbe Nicht mehr ganz neu hier

    Dabei seit:
    03.11.2009
    Beiträge:
    134
    Geschlecht:
    männlich
    Ort:
    bayern
    Software:
    Adobe CS4 web premium
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    Hallo,
    ich möchte einfach kleine Bilder vergrößert anzeigen wenn man mit der maus darauf fährt.
    das größere Bild sollte nur so lange zu sehen sein wie mann mit der Maus auf dem kleinen Bild bleibt.
    Kann man das mit Dreamweaver cs4?
    Bitte erst Dreamweaverlösungen schreiben
    Danke vorab...
     
    #1      
  2. Fidelis_jpg

    Fidelis_jpg Aktives Mitglied

    Dabei seit:
    02.09.2009
    Beiträge:
    252
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    Software:
    Adobe Creative Suite CS6; Maya 2014; Nuke
    Kameratyp:
    Canon EOS 600D
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    also mit dem dreamweaver kenne ich mich nicht aus, aber in HTML geht das ziemlich einfach:

    HTML:
    1.  
    2. <img src="kleines_bild.jpg" onmouseover="großes_bild.jpg" onmouseout="kleines_bild.jpg">
    3.  
     
    #2      
  3. Warlon

    Warlon Noch nicht viel geschrieben

    Dabei seit:
    19.08.2009
    Beiträge:
    3
    Geschlecht:
    männlich
    Ort:
    Cottbus
    Software:
    Creative Suite 2 | Notepad++
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Hab den Code selbst mal local ausprobiert
    und funktioniert bei mir leider nicht.
    Das kleine Bild wurde zwar angezeigt,
    aber ein Mouseoverzur brachte keine Anzeige des großen Bildes.
    Leider brachte mich Selfhtml auch nicht weiter.

    Des weiteren sollte der <tag> auch W3C-Konform geschlossen werden.
    HTML:
    1. <img src="kleines_bild.jpg" onmouseover="großes_bild.jpg" onmouseout="kleines_bild.jpg" />
    MfG Warlon
     
    Zuletzt bearbeitet: 22.11.2009
    #3      
  4. Poki29

    Poki29 Ps-ler ;-)

    Dabei seit:
    21.07.2009
    Beiträge:
    560
    Geschlecht:
    männlich
    Software:
    PS Cs3, Dremaweaver und viele mehr ;-)
    Kameratyp:
    Dimage A2
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Ich weiß nicht ob du das wissenb willst aber versuch doch mal die Lightbox 2 Lightbox 2

    Das läuft über ein Java script und ist einfach zu installieren

    mfg
     
    #4      
  5. Fidelis_jpg

    Fidelis_jpg Aktives Mitglied

    Dabei seit:
    02.09.2009
    Beiträge:
    252
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    Software:
    Adobe Creative Suite CS6; Maya 2014; Nuke
    Kameratyp:
    Canon EOS 600D
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Ok, probier mal das:

    HTML:
    1. <img src="kleines_bild.jpg" onmouseover="this.src='großes_bild.jpg';" onmouseout="this.src='kleines_bild.jpg';"/>
     
    #5      
  6. sumpfbarbe

    sumpfbarbe Nicht mehr ganz neu hier

    Dabei seit:
    03.11.2009
    Beiträge:
    134
    Geschlecht:
    männlich
    Ort:
    bayern
    Software:
    Adobe CS4 web premium
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Hallo und Danke erstmal für die Hilfe.

    Leider bin ich aber noch nicht weiter.
    Zur besseren Verständlichkeit sollte ich noch erkären das das vergrößerte Bild
    bei der Maus erscheinen sollte ähnlich einem POPup. Es soll sich kein eigenes Browserfenster öffnen. Es soll so aussehen als ob das größere Bild über der Seite schwebt. Das kleine bild sollte jedoch genauso bleiben wie es ist.

    Grüße und Danke vorab...
     
    #6      
  7. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    #7      
  8. sumpfbarbe

    sumpfbarbe Nicht mehr ganz neu hier

    Dabei seit:
    03.11.2009
    Beiträge:
    134
    Geschlecht:
    männlich
    Ort:
    bayern
    Software:
    Adobe CS4 web premium
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    hallo Cebito,

    super Link ,Danke.
    Das müßte es sein.
    Werde es mal ausprobieren.

    Grüße
     
    #8      
  9. serverhombre

    serverhombre Guest

    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Hallo,
    es gibt auch noch ne möglichkeit sowas mit css zu machen:
    Thumbnails

    Ich hoffe das ist hilfreich. ;)
     
    #9      
  10. sumpfbarbe

    sumpfbarbe Nicht mehr ganz neu hier

    Dabei seit:
    03.11.2009
    Beiträge:
    134
    Geschlecht:
    männlich
    Ort:
    bayern
    Software:
    Adobe CS4 web premium
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Hallo serverhombre,

    hab das mal probiert
    aber bei der überprüfung im Browser erscheint auch immer gleich das große Bild
    Hab mal den orginalcode kopiert.


    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/vorlage.dwt" codeOutsideHTMLIsLocked="false" -->
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <!-- InstanceBeginEditable name="doctitle" -->
    5. <title>titel</title>
    6.  
    7. img {
    8. border:none;
    9. }
    10.  
    11.  
    12. .box a:hover {
    13. color:#000;
    14. background:#fff;
    15. width:175px;
    16. }
    17.  
    18. .box span {display:none;}
    19.  
    20. .box a:hover span {
    21. color:#000;
    22. background:#fff;
    23. display:block;
    24. padding:1em;
    25. position:absolute; top:2em; right:2em;
    26. border:1px solid black;
    27. }
    28.  
    29.  
    30.  
    31.  
    32. <script language='javascript' src='Scripts/grossbild.js'></script>
    33.  
    34. <!-- InstanceEndEditable -->
    35. <link href="style/style.css" rel="stylesheet" type="text/css" /><!--[if IE]>
    36. <style type="text/css">
    37. /* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
    38. .twoColElsLtHdr #sidebar1 { padding-top: 30px; }
    39. .twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
    40. /* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
    41. </style>
    42. <![endif]-->
    43. <!-- InstanceBeginEditable name="head" -->
    44. <script type="text/javascript">
    45. <!--
    46. function MM_preloadImages() { //v3.0
    47.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    48.    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    49.    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    50. }
    51.  
    52. function MM_swapImgRestore() { //v3.0
    53.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    54. }
    55. //-->
    56. <!-- InstanceEndEditable -->
    57.  
    58. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    59. </head>
    60.  
    61. <body class="twoColElsLtHdr">
    62.  
    63. <div id="container">
    64.   <div id="header">
    65.     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="140" id="head" title="title head">
    66.       <param name="movie" value="networkhead.swf" />
    67.       <param name="quality" value="high" />
    68.       <param name="wmode" value="opaque" />
    69.       <param name="swfversion" value="6.0.65.0" />
    70. <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
    71.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
    72.       <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
    73.       <!--[if !IE]>-->
    74.       <object type="application/x-shockwave-flash" data="networkhead.swf" width="800" height="140">
    75.         <!--<![endif]-->
    76.         <param name="quality" value="high" />
    77.         <param name="wmode" value="opaque" />
    78.         <param name="swfversion" value="6.0.65.0" />
    79.         <param name="expressinstall" value="Scripts/expressInstall.swf" />
    80. <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
    81.         <div>
    82.           <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
    83. <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
    84.         </div>
    85.         <!--[if !IE]>-->
    86.       </object>
    87.       <!--<![endif]-->
    88.     </object>
    89.   </div>
    90.   <div id="sidebar1">
    91. <p><a href="index.html"><img src="http://www.psd-tutorials.de/modules/Forum/images/button.jpg" alt="homebutton" width="120" height="30" border="0" id="homebutton" /></a></p>
    92. <p><a href="firma.html"><img src="http://www.psd-tutorials.de/modules/Forum/images/button-firma.jpg" alt="firmabutton" width="120" height="30" border="0" /></a></p>
    93. <p><a href="referenzen.html"><img src="http://www.psd-tutorials.de/modules/Forum/images/button-referenz.jpg" alt="referenzbutton" width="120" height="30" border="0" /></a></p>
    94. <p><a href="kontakt.html"><img src="http://www.psd-tutorials.de/modules/Forum/images/button-kontakt.jpg" alt="kontaktbutton" width="120" height="30" border="0" /></a></p>
    95. <p><a href="impressum.html"><img src="http://www.psd-tutorials.de/modules/Forum/images/button-impressum.jpg" alt="impressumbutton" width="120" height="30" border="0" /></a></p>
    96. <!-- end #sidebar1 --></div>
    97.   <div id="mainContent"><!-- InstanceBeginEditable name="hauptinhalt" -->
    98.     <h1 class="networkerheadline"><strong>• your-networker •</strong></h1>
    99.     <h2>Referenzen(auszug):</h2>
    100.     <table width="75%" height="249" border="0">
    101.       <tr>
    102. <td width="20%" height="130" ><img src="http://www.psd-tutorials.de/modules/Forum/images/fireworkerklein.jpg" alt="fireworker" width="100" height="120" border="0" id="fireworker" /></td>
    103.      
    104. <td width="55%"><img src="http://www.psd-tutorials.de/modules/Forum/images/ara-onlineklein.jpg" alt="arabelle-online" width="100" height="120" border="0" id="arabelle" /></td>
    105. <td width="25%"><img src="http://www.psd-tutorials.de/modules/Forum/images/musikschuleklein.jpg" alt="musikschule" width="100" height="120" border="0" id="musikschule" /></td>
    106.       </tr>
    107.       <tr>
    108. <td height="113"><img src="http://www.psd-tutorials.de/modules/Forum/images/schreimüllerklein.jpg" alt="schreimüller" width="100" height="120" border="0" id="schreimüller" /></td>
    109. <td><img src="http://www.psd-tutorials.de/modules/Forum/images/galloneroklein.jpg" alt="gallonero" width="120" height="100" id="gallonero" /></td>
    110. <td><img src="http://www.psd-tutorials.de/modules/Forum/images/photoexplosionklein.jpg" alt="photoexplosion" width="100" height="120" border="0" id="photoexplosion" /></td>
    111.       </tr>
    112.     </table>

    die Bilder in der Tabelle sollten sich eben vergrößern.
    Wär toll wen Du mir für ein Bild den Code posten könntest.
    Hab da irgendwo nen Hänger

    Danke vorab...:)
     
    Zuletzt von einem Moderator bearbeitet: 23.11.2009
    #10      
  11. serverhombre

    serverhombre Guest

    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Hallo,
    beim CSS fehlt oben ein <style type="text/css">

    dann können die Bilder eingebunden werden wichtig die class="box" im <td> angeben:

    HTML:
    1. <td width="20%" height="130" class="box" >
    2. <a href="irgendwo.htm"><img src="bild.jpg" width="120" height="122" alt="thumbnail" />
    3. Bildname: <br />
    4. <img src="bild-gross.jpg" width="469" height="542" alt="thumbnail" /><br />
    5. Bildbeschreibung.......
    6. </span></a>
    7. </td>
     
    #11      
  12. sumpfbarbe

    sumpfbarbe Nicht mehr ganz neu hier

    Dabei seit:
    03.11.2009
    Beiträge:
    134
    Geschlecht:
    männlich
    Ort:
    bayern
    Software:
    Adobe CS4 web premium
    Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit dw cs
    AW: Bildvergrößerung durch onmouse bzw vergrößerung verschwindet durch mouseout mit d

    Hallo und Danke

    für die tolle Hilfe!!!
    Die Frage ist beantwortet.

    Würde mich freuen wenn auch meine 2. Frage so tol beantwortet würde
    ( Nebel wegradieren lassen um darunterliegende Seite erscheinen zu lassen mit Flash cs4
    Forum > Webbereich > Flash > Flash - Sonstiges)


    grüße
     
    #12      
x
×
×