LinkBack URL
About LinkBacks
ZitierenDas kannst Du mit CSS(bevorzugt) oder auch mit JavaScript ohne großen Aufwand realisieren. Beim CSS brauchst du eigentlich nur beim hover einen anderen Pfad zum Bild angeben, als bei link.
Hallo, ich möchte für eine Portfolio so ein ROllover machen. Das hab ich schonmal auf ner HP gesehen, weiss aber nimmer wo. Also man geht auf ein kleines Bild und dieses vergrößert sich. Geht das auch ohne Flash? Das muss nicht langsam vergrößert werden oder so, das reicht wenn das ruckartig passiert.
mfg
Das kannst Du mit CSS(bevorzugt) oder auch mit JavaScript ohne großen Aufwand realisieren. Beim CSS brauchst du eigentlich nur beim hover einen anderen Pfad zum Bild angeben, als bei link.
Schöne Grüße aus Thüringen
Stephan Page
Stell Dir vor, hier steht was und keiner liest es!! schon entdeckt?? F1 ist ne geile Taste
Ich beantworte keine E-Mails. Bitte alle Fragen ins Forum
schon gehört??? Das Internet ist voll, die lassen keinen mehr rein!!
Könntest du mir das genauer erklären? Ich kapier nicht ganz wie du das meinst.
Ich nehme an, du meinst das so:
Hier einfach ma gucken.
Wenn ja, lad dir das Beispiel einfach mal runter, und probier mal für deine Zwecke. Quelltext ist kurz und knackig
Schöne Grüße aus Thüringen
Stephan Page
Stell Dir vor, hier steht was und keiner liest es!! schon entdeckt?? F1 ist ne geile Taste
Ich beantworte keine E-Mails. Bitte alle Fragen ins Forum
schon gehört??? Das Internet ist voll, die lassen keinen mehr rein!!
Ich kapiers nicht, hab zwar den Quelltext herausgefunden aber ich habe keine Ahnung von class oder a Tag
Für Dich ist hover am wichtigsten.
Hier findest Du Erläuterungen: self html
Das hilft mir auch nicht viel weiter...
Der Trick ist, dass du im Link selber ein Transparentes Gif hast, was sich den Maßen wie bei ".bild1" und ".bild1:hover" angegeben anpasst. Deine eigentlichen Bilder liegen ja durch "background-image" im mHIntergrund des Links
dann machst du deinen link z.B. so:PHP-Code:.bild1{
//Hier der Pfad zu deinem kleinen Bild , z.B background-image:url(bilder/bildKlein.jpg);
background-image:url(Blumeklein.jpg);
background-repeat:no-repeat;
// width und Height sind die Maße für dein kleines Bild
width: 100px;
height: 76px;
display: block;
}
.bild1:hover{
//Hier der Pfad zu deinem großen Bild wenn man mit der Maus drüberfährt, z.B background-image:url(bilder/bildGross.jpg);
background-image:url(Blumegross.jpg);
display: block;
// width und Height sind die Maße für dein großes Bild
height:152px;
width:200px;
}
PHP-Code:<a href="#" class="bild1"><img src="blind.gif" alt="Blume" border="0"></a>
Schöne Grüße aus Thüringen
Stephan Page
Stell Dir vor, hier steht was und keiner liest es!! schon entdeckt?? F1 ist ne geile Taste
Ich beantworte keine E-Mails. Bitte alle Fragen ins Forum
schon gehört??? Das Internet ist voll, die lassen keinen mehr rein!!
Bin ich jetzt ein Dummkopf??
Ich hab zwar aktualisieren gedrückt aber da passiert nix, anstatt irgendso ein VorschauBildchen kommt, steht jetzt in der Ebene das ganze .
bild1{ background-image:E://Oliver/Homepage1/Bilder/Grafiken/judo_rv_small.jpg; background-repeat:no-repeat; // width und Height sind die Maße für dein kleines Bild width: 114px; height: 81px; display: block; } .bild1:hover{ background-image:url(bilder/bildGross.jpg); background-image:E://Oliver/Homepage1/Bilder/Grafiken/judo_rv.jpg; display: block; height:300px; width:216px; }
Du hast bei background-image kein url angegeben
Kopiere mal den obigen Code und füge Ihn in deinen Quelltext ein(Alten Quelltext an dieser Stelle überschreiben).PHP-Code:.bild1{
background-image:url(E://Oliver/Homepage1/Bilder/Grafiken/judo_rv_small.jpg; background-repeat:no-repeat);
// width und Height sind die Maße für dein kleines Bild
width: 114px;
height: 81px;
display: block;
}
.bild1:hover{
background-image:url(E://Oliver/Homepage1/Bilder/Grafiken/judo_rv.jpg);
display: block;
height:300px;
width:216px;
}
Sollte dann eigentlich funktionieren. Das ganze kommt natürlich im Header in den Style mit rein. Siehe Quelltext aus obigem Beispiel
Schöne Grüße aus Thüringen
Stephan Page
Stell Dir vor, hier steht was und keiner liest es!! schon entdeckt?? F1 ist ne geile Taste
Ich beantworte keine E-Mails. Bitte alle Fragen ins Forum
schon gehört??? Das Internet ist voll, die lassen keinen mehr rein!!
Heul, ich versteh das nicht.
Muss ich den Code in den Quelltext von meiner seite.html einbauen? Ich hab keine Ahnung von ccs. Wenn ich das so mache in html dann klappts nicht.
...bin so blöd.
Und wenn ich bei ccs das mach dann kann ich ja garkeine Vorschau machen - ich blick das nicht.
zeig mal den gesamten Code deiner Seite her (bitte als zip ranhängen)
Schöne Grüße aus Thüringen
Stephan Page
Stell Dir vor, hier steht was und keiner liest es!! schon entdeckt?? F1 ist ne geile Taste
Ich beantworte keine E-Mails. Bitte alle Fragen ins Forum
schon gehört??? Das Internet ist voll, die lassen keinen mehr rein!!
So gehts auch oder?PHP-Code:<html>
<head>
<title>redro.de - mediadesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #B7B4A9;
}
.Stil1 {font-family: Arial, Helvetica, sans-serif}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
.Stil7 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.Stil11 {font-size: 10px}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
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;
}
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_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Bilder/site_navi_red_home.gif','Bilder/site_navi_red_files.gif','Bilder/site_navi_red_portfolio.gif','Bilder/site_navi_red_myself.gif','Bilder/site_navi_red_links.gif','Bilder/site_navi_red_guestbook.gif')">
<!-- ImageReady Slices (homenew.psd) -->
<div id="Layer3" style="position:absolute; width:138px; height:7px; z-index:2; color: #000000; top: 906px; left: 406px;">
<p align="left" class="Stil1"><span class="Stil1 Stil11">Counter:<a href="http://Cool-Counter.de/stats.php?user=redro&c_id=4560" target="_blank"><img src="http://Cool-Counter.de/statistik_digits.php?user=redro&c_id=4560" alt="Statistik by http://Cool-Counter.de" border="0" align="bottom"></a> |<a href="impressum.html"> Impressum</a> | </span></p>
</div>
<table id="Tabelle_01" width="894" height="990" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3"><img src="Bilder/site_leftshadow.gif" width="144" height="990" alt=""></td>
<td colspan="7">
<img src="Bilder/site_banner.gif" width="692" height="92" alt=""></td>
<td rowspan="3">
<img src="Bilder/site_rightshadow.gif" width="58" height="990" alt=""></td>
</tr>
<tr>
<td> <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Bilder/site_navi_red_home.gif',1)"><img src="Bilder/site_navi_home.gif" name="Home" width="60" height="38" border="0"></a></td>
<td> <a href="files.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('files','','Bilder/site_navi_red_files.gif',1)"><img src="Bilder/site_navi_files.gif" name="files" width="46" height="38" border="0"></a></td>
<td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portfolio','','Bilder/site_navi_red_portfolio.gif',1)"><img src="Bilder/site_navi_red_portfolio.gif" name="portfolio" width="79" height="38" border="0"></a></td>
<td> <a href="myself.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('myself','','Bilder/site_navi_red_myself.gif',1)"><img src="Bilder/site_navi_myself.gif" name="myself" width="67" height="38" border="0"></a></td>
<td> <a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','Bilder/site_navi_red_links.gif',1)"><img src="Bilder/site_navi_links.gif" name="links" width="51" height="38" border="0"></a></td>
<td> <a href="guestbook.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('guestbook','','Bilder/site_navi_red_guestbook.gif',1)"><img src="Bilder/site_navi_guestbook.gif" name="guestbook" width="95" height="38" border="0"></a></td>
<td>
<img src="Bilder/site_navi_right.gif" width="294" height="38" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="Bilder/site_textspace.gif" width="692" height="860" alt="">
<div id="Layer1" style="position:absolute; width:665px; height:801px; z-index:1; left: 156px; top: 141px;"> </div></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Nutzt du den DW zum erstellen der Seiten und wenn ja, welche Version?
Vor schon einiger zeit habe ich diese Variante aufgebaut. Ist definitiv nicht die ideale Variante, aber erfüllt erst einmal seinen Zweck und vor allem werden die Bilder nicht durch Quelltext zu irgend welchen Größen gezwungen.
ganz kurz:
- das 1.Bild ist diese Größe mit "blau rundum"
- das 2. Bild ist dann halt größer und nur auf blauem Untergrund
Gunder
PS. Gleich gibt es wieder "Schimpfe von den Profis"
@rednug
er möchte ja eine Lösung möglichst ohne JS.
Die im Style gemachten Angaben sind natürlich die original-Maße der beiden Bilder. Eine Skalierung wird nicht vorgenommen.vor allem werden die Bilder nicht durch Quelltext zu irgend welchen Größen gezwungen.
ne,ne so schlimm ist das nu auch wieder nichGleich gibt es wieder "Schimpfe von den Profis"
Schöne Grüße aus Thüringen
Stephan Page
Stell Dir vor, hier steht was und keiner liest es!! schon entdeckt?? F1 ist ne geile Taste
Ich beantworte keine E-Mails. Bitte alle Fragen ins Forum
schon gehört??? Das Internet ist voll, die lassen keinen mehr rein!!
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)