Bildausschnitte verlinken Photoshop

Beitrag von **Patrick** » Fr 7. Okt 2011, 21:41

Huhu zusammen,

ich habe mal gehört, dass man aus einer Grafik mehrere einzelteile als Link einbauen kann.
Geht das?
Mein Vorhaben ist eine schlichte Grafik mit mehreren kleinen Zeichnungen drauf zu gestalten.
Und aus dieser großen Grafik sollen die kleinen Zeichnungen zu verschiedenen Textseiten verlinkt werden.

Um sich das mal etwas besser vortsellen zu konnen, versuche ich es mal etwas besser zu erklären.

Stellt euch bspw. einen mittelgroßen Kreis vor, an den mehrere kleine Zeichnungen hängen. Und diese einzelnen
Zeichnungen sollen dann zu bestimmten Textseiten verlinkt werden. Weiß einer wie das geht?

Würde mich freuen, wenn man mir darüber Tips geben kann.

Vielen Dank im voraus!

LG
Patrick

Beitrag von **Patrick** » Fr 7. Okt 2011, 22:14

Ich hab da was gefunden, was recht interessant ist.
Leider fehlt da aber die onmouseover funktion

. Sprich beim berühren soll man dass besser sehen.
Kann man das abändern?
Ich will ein design für eine einzelne Seite haben. Quasi so wie oben beschrieben. Das sieht mir aber nach einer mammutaufgabe aus

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Verweis-sensitive Grafiken definieren - map, area, usemap</title>
</head>
<body>

<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>

<p>
  <img src="karte.png" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte">
  <map name="Landkarte">
    <area shape="rect" coords="11,10,59,29"
          href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
    <area shape="rect" coords="42,36,96,57"
          href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
    <area shape="rect" coords="42,59,78,80"
          href="http://www.mainz.de/" alt="Mainz" title="Mainz">
    <area shape="rect" coords="100,26,152,58"
          href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
    <area shape="rect" coords="27,113,93,134"
          href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
    <area shape="rect" coords="100,138,163,159"
          href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
    <area shape="rect" coords="207,77,266,101"
          href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
    <area shape="rect" coords="282,62,344,85"
          href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
    <area shape="rect" coords="255,132,316,150"
          href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
    <area shape="rect" coords="78,182,132,200"
          href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
    <area shape="rect" coords="142,169,200,193"
          href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
    <area shape="rect" coords="140,209,198,230"
          href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
    <area shape="rect" coords="187,263,222,281"
          href="http://www.ulm.de/" alt="Ulm" title="Ulm">
    <area shape="rect" coords="249,278,304,297"
          href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
          href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
  </map>
</p>

</body>
</html>

Beitrag von **Patrick** » Fr 7. Okt 2011, 22:44

so, ich hab mal eine grafik gebastelt 1024 x 768px. Gibt einen befehl, dass
die Grafik den kompletten bildschirm ausfüllt? Egal ob man einen 19" oder 38"
Bildschirm hat? Dann würde ich die Grafik nämlich größer machen.

Beitrag von **moni** » Fr 7. Okt 2011, 22:48

also ich hab das so verstanden Patrick ..
du bastelst dir ein Bild dann zerlegst den in Teile...und jede Einzel teil soll zu eine HP führen..bzw. verlinkt mit eine Seite sein....

das ist doch einfach ...

Code: Alles auswählen

<a href=" Hier kommt  link vom Seite " target ="_blank"><img src=" URL grafik " border ="o"></a>

und zwar jede klein teil muss so verlinkt sein.....oder hst an was anderes gedacht...mit mouse over Effekt?
wenn ja da wenn ich mich recht erinnere hast schon mal so was gehabt mit den Bilder was sich schwarz weiß auf bunt gemacht haben !

Beitrag von **moni** » Fr 7. Okt 2011, 22:51

Patrick hat geschrieben:so, ich hab mal eine grafik gebastelt 1024 x 768px. Gibt einen befehl, dass
die Grafik den kompletten bildschirm ausfüllt? Egal ob man einen 19" oder 38"
Bildschirm hat? Dann würde ich die Grafik nämlich größer machen.

wenn sich die Grafik wiederholt repart da kann sie den ganze Bildschirm füllen

Beitrag von **Patrick** » Sa 8. Okt 2011, 19:51

huhu moni,

ich habe es jetzt herausgefunden, wie das ganze funktioniert. Es ist zwar etwas Aufwändig, aber
das Ergebnis und die neuen Möglichkeiten dazu entschguldigen den Aufwand.
Hier mal das Ergebnis:
http://patschwork.npage.de/link_51055577.html

Aber da dies noch nicht kompliziert genug ist, muss es noch schwieriger werden. Ich glaube aber,
dass mir da nur die besten helfen können

.

Und zwar möchte ich gerne, das sich die Grafiken bei mouseover farbig darstellen. Sprich man
geht mit der Maus über "Handytaschen", soll das Motiv farbig dargestellt werden. Mir ist bewusst,
dass ich für jede Grafik eine zusätzliche benötige.

Aber wie kann ich dass am besten codieren?

Ich lass einfach mal den code da und lass mich überraschen, ob man mir dabei helfen kann.

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Shopübersicht</title>
</head>
  
  
  <style type="text/css">
          

body {
background-image:url();
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
background-color: #775121;
font-family: 'Buda', arial, serif;
font-size: 16px;
}
  </style>  
 
<body>


<center>
<p>
  <img src="http://file1.npage.de/009238/11/bilder/test_1.gif" width="1024" height="768" border="0" alt="Karte" usemap="#Landkarte">
  <map name="Landkarte">
    
    <area shape="circle" coords="210,410,60"
    href="http://patschwork.npage.de/taschen___clutch_34309999.html" alt="Koblenz" title="Taschen / Clutch">
    
    <area shape="rect" coords="285,55,740,165"
    href="http://patschwork.npage.de/" alt="Taschen / Clutch" title="Startseite">
    
    <area shape="circle" coords="840,240,65"
          href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Handytaschen" title="Handytaschen">
    
    
  </map>
</p>
  </center>
</body>
</html>

Beitrag von **moni** » Sa 8. Okt 2011, 21:02

Ich halte mich hier nicht für die beste ,denke aber du kannst damit versuchen

Code: Alles auswählen

 <style type="text/css">
  <!--
   a.bild1 { display:block; background-image:url(bild schwarz weiß); width:100px; height:100px }
a.bild1:hover { background-image:url(bild bunt); width:100px; height:100px }

  =-->
  </style>


  </head>
<body>


<table border="2" bordercolor=""bgcolor="" cellpadding="3" cellspacing="3">
 <tr>
  <td><a class="bild1" href="HP URL"></a>     </td>
 </tr>

  </table>


</body>
</html>

Kannst allerdings beliebig erweitern umbauen usw normale weise muss damit sehr gut klar kommen !

Beitrag von **Patrick** » Sa 8. Okt 2011, 21:39

huhu moni,

na das problem ist aber, dass der code doch mit in dem alten beigefügt werde muss.

Beitrag von **moni** » So 9. Okt 2011, 09:55

na da binde ihm den ein Patrick ....diesen Code wird nicht das Rest Beeinflussen oder stören....
CSS in CSS Bereich und HTML in HTML Bereich ...
Du hast doch schon mal so ne Geschichte gemacht....
http://www.oyla.de/cgi-bin/eigenes.cgi? ... d=09008089
das war hier mit einen JS gemacht...ist viel besser als meinen einfachen CSS ....

Beitrag von **Patrick** » Mo 10. Okt 2011, 18:23

erstmal danke moni für deine hilfe!

Habe immernoch das Problem mit der Pinnwand, die eigentlich über den gesamten Bildschirm gehen soll

.

Ich habe hier bspw. einen großen Bildschirm, wo ich ständig die wiederholungen sehe.
Nun nochmal zur frage.

Wie und wo stelle ich das so ein, dass das bild über den gesamten Bildschirm geht ohne wiedreholungen.
Dass man das Bild auf einem 19" Monitor und auf einem 26" Monitor ganz sieht?

Ich verzweifel gerade föllig

Ich bedanke mich schon jetzt für eure Hilfen!

lg
patrick

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Shopübersicht</title>
 </head>
   
   
   <style type="text/css">
           
 
 body {
 background-image:url(http://file1.npage.de/009238/11/bilder/pinnwand_neu.gif);
 background-repeat: no repeat;

 background-position: center center;
 background-color: #775121;
 font-family: 'Buda', arial, serif;
 font-size: 16px;
 }
   </style>  
  
 <body>
 
 
 <center>
 <p>
   <img src="http://file1.npage.de/009238/11/bilder/pinnwand_neu.gif" width="1024" height="768" border="0" alt="Karte" usemap="#Landkarte">
   <map name="Landkarte">
     
     <area shape="circle" coords="180,240,130"
     href="http://patschwork.npage.de/taschen___clutch_34309999.html" alt="Koblenz" title="Taschen / Clutch">
     
     <area shape="rect" coords="285,55,740,165"
     href="http://patschwork.npage.de/" alt="Startseite" title="Startseite">
     
     <area shape="circle" coords="800,290,150"
           href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Handytaschen" title="Handytaschen">
     
     <area shape="circle" coords="500,430,150"
           href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Tierzubeh&ouml;r" title="Tierzubeh&ouml;r">
 
 <area shape="circle" coords="195,610,150"
           href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Sale" title="Sale">    
     
   </map>
 </p>
   </center>
 </body>
 </html>

HomepageHelfer.org

Bildausschnitte verlinken Photoshop

Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Re: Bildausschnitte verlinken Photoshop

Wer ist online?