Antworten auf deine Fragen:
Neues Thema erstellen

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

sumpfbarbe

Nicht mehr ganz neu hier

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

Fidelis_jpg

Aktives Mitglied

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:
<img src="kleines_bild.jpg" onmouseover="großes_bild.jpg" onmouseout="kleines_bild.jpg">
 
W

Warlon

Guest

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 auch nicht weiter.

Des weiteren sollte der <tag> auch W3C-Konform geschlossen werden.
HTML:
<img src="kleines_bild.jpg" onmouseover="großes_bild.jpg" onmouseout="kleines_bild.jpg" />
MfG Warlon
 
Zuletzt bearbeitet von einem Moderator:

Poki29

Ps-ler ;-)

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

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

mfg
 

Fidelis_jpg

Aktives Mitglied

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

Ok, probier mal das:

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

sumpfbarbe

Nicht mehr ganz neu hier

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

sumpfbarbe

Nicht mehr ganz neu hier

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
 
S

serverhombre

Guest

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:


Ich hoffe das ist hilfreich. ;)
 

sumpfbarbe

Nicht mehr ganz neu hier

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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/vorlage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>titel</title>

img {
border:none;
}


.box a:hover {
color:#000;
background:#fff;
width:175px;
}

.box span {display:none;}

.box a:hover span {
color:#000;
background:#fff;
display:block;
padding:1em;
position:absolute; top:2em; right:2em;
border:1px solid black;
}



</style>

<script language='javascript' src='Scripts/grossbild.js'></script>

<!-- InstanceEndEditable -->
<link href="style/style.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css"> 
/* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
</style>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
<!-- InstanceEndEditable -->

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body class="twoColElsLtHdr">

<div id="container">
  <div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="140" id="head" title="title head">
      <param name="movie" value="networkhead.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
<!-- 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. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="networkhead.swf" width="800" height="140">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
        <div>
          <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
<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>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>
  <div id="sidebar1">
<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>
<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>
<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>
<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>
<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>
<!-- end #sidebar1 --></div>
  <div id="mainContent"><!-- InstanceBeginEditable name="hauptinhalt" -->
    <h1 class="networkerheadline"><strong>• your-networker •</strong></h1>
    <h2>Referenzen(auszug):</h2>
    <table width="75%" height="249" border="0">
      <tr>
<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>
      
<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>
<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>
      </tr>
      <tr>
<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>
<td><img src="http://www.psd-tutorials.de/modules/Forum/images/galloneroklein.jpg" alt="gallonero" width="120" height="100" id="gallonero" /></td>
<td><img src="http://www.psd-tutorials.de/modules/Forum/images/photoexplosionklein.jpg" alt="photoexplosion" width="100" height="120" border="0" id="photoexplosion" /></td>
      </tr>
    </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 bearbeitet von einem Moderator:
S

serverhombre

Guest

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:
<td width="20%" height="130" class="box" >
<a href="irgendwo.htm"><img src="bild.jpg" width="120" height="122" alt="thumbnail" />
<span>
Bildname: <br />
<img src="bild-gross.jpg" width="469" height="542" alt="thumbnail" /><br />
Bildbeschreibung.......
</span></a>
</td>
 

sumpfbarbe

Nicht mehr ganz neu hier

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


grüße
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.641
Beiträge
1.538.511
Mitglieder
67.559
Neuestes Mitglied
shimizu
Oben