Ralf´s Hilfeseite
((-:= Bilder verlinken für absolute Anfänger =:-))


Hier lernt man Schritt für Schritt Bilder (.jpg) und animierte Bilder (.gif) zu verlinken

www.mich-Seiten-Award

Ich bedanke mich bei www.Mich-Seiten.de für den Michseiten-Award Mai2005
für meine kleine bescheidene Hilfeseite hier :-))
Es wurde diesmal nicht das Design bewertet, sondern die (Hilfe-)Idee auf dieser Michseite
Stimmt, Design ist nicht mein Fachgebiet, aber Hilfestellung bei Fragen hauptsächlich zu Bilderverlinken&Co.
"Do not only tell them - also teach them!"

Einleitung:

Hast du dich schonmal gewundert, wie die "Konkurrenz" bei Ebay so schöne große Bilder
direkt unter die Artikelbeschreibung bekommt? (Beispielbild 640x480 Pixel groß: "klick hier")
--> oder nette kleine animierte Bildchen wie diese Smilie's in den Auktionen rumhüpfen können?

Dann folge mir Schritt für Schritt durch diese Anleitung, und in kurzer Zeit wirst du das auch können.

Das Wichtigste: "der Bildverlinkbefehl"

  • Das da unten ist "er"
  • Mit diesem HTML-Befehl bekommst du ein Bild von der einen Ecke des Internets zur anderen Ecke.
  • (Also von deiner Bildablage im Internet z.B. in eine Ebay-Auktion, oder in eine Homepage/Mich-Seite usw.)

<img src="Url">

Schau dir diesen Bildverlinkbefehl jetzt mal genauer an:

  1. An Stelle des Url kommt immer die Adresse(Url) des Bildes (oder des Gif)
  2. Zwischen dem img und dem src muss immer eine Leerstelle (Space) sein.
  3. Vergiss auch nie diese Gänsefüßchen " " und wehe , es ist ein Komma drin oder sonstwas unpassendes,
    bzw. irgendwas fehlt oder ist zuviel....."dann" funktioniert der Link eben leider nicht

<img src="Url">

Als Versuchsobjekt nehmen wir mal das Ebay-Logo:


Nun brauchen wir die Bildadresse (Url) des Bildes -- bzw. eben des Ebay-Logos

Ganz einfach:

  • Mit dem Mauspfeil auf das Ebay-Logo gehen
  • Rechte Maustaste klicken
  • in dem Fenster, das sich dann öffnet auf (die unterste Option) "Eigenschaften" klicken -- dort steht dann die Adresse (Url) -- und genau "die" brauchen wir
  • Nun klicken wir 3 mal auf diese Adresse (Url) -- bis Sie schön blau (markiert) wird
  • dann wieder rechte Maustaste auf die markierte Adresse (url) -- klick auf "kopieren" --
  • und wir haben endlich die Bild-Adresse in der Maus

Markieren kann man auch anders: Mit Mauspfeil an den Anfang der Bildadresse (Url) gehen -- linke Maustaste drücken und über diese Bildadresse (Url) fahren -- dann ist sie auch blau (markiert) -- wieder mit Pfeil auf markierte Bildadresse gehen -- Rechter Mausklick darauf -- kopieren -- und die Bildadresse ist in der Maus

Und das ist sie, die Bildadresse des Ebay-Logos:

http://pics.ebaystatic.com/aw/pics/de/navbar/redesign_p1/ebayLogo.gif

So, wir haben die Bildadresse (Url) und wir haben den Bildverlinkbefehl --
jetzt setzen wir die 2 Dinger mal zusammen:

Die Bildadresse:

http://pics.ebaystatic.com/aw/pics/de/navbar/redesign_p1/ebayLogo.gif

Der Bildverlinkbefehl:

<img src="Url">

Bildverlinkbefehl und Bildadresse (Url) korrekt zusammengesetzt:

<img src="http://pics.ebaystatic.com/aw/pics/de/navbar/redesign_p1/ebayLogo.gif">

Ergebnis: ---> das Ebay-Logo


Und jetzt zum praktischen Teil des Lehrganges:

das Bild muss von dir erfolgreich verlinkt werden

HTML-Tag in das Feld schreiben/reinkopieren

 ........und du siehst,ob du gut bist =:-))


ACHTUNG:
Das (HTML-)Ergebnis erscheint zwischen diesen blauen Linien <-- falls es nicht klappt --> es funktioniert leider nicht mit allen Browsern (IE ja, FF evtl. nicht).


und nun:

  • Kopiere, wie bereits gelernt, diese Ebay-Logo Bildadresse mit dem Bildverlinkbefehl und setze es in das weisse Feld dort oben -- dann klicke auf den Button
  • <img src="http://pics.ebaystatic.com/aw/pics/de/navbar/redesign_p1/ebayLogo.gif">
  • Zwischen den blauen Linien da oben erscheint das Ebay-Logo?
    dann hast du erfolgreich ein Bild/Gif verlinkt!
    *Glückwunsch*

Weil's so schön war, gleich nochmal?

  • Hier ein kleines Gif-Bildchen:  
  • Mauspfeil auf's Bang-Bildchen -- Maustaste rechts klicken -- dann auf Eigenschaften
    -- und dort steht wieder die Adresse (Url)
  • Die Bildadresse lautet:
    http://people.freenet.de/pudda/bang.gif
  • Der Bildverlinkbefehl:
    <img src="Url">
  • Bildverlinkbefehl und Bildadresse (Url) korrekt zusammengesetzt:
    <img src="http://people.freenet.de/pudda/bang.gif">
  • Einfach nochmal da oben in das weisse Testfeld setzen

  • So funktioniert das mit jpg.Bildern (jpg=Idealbilderformat für's Internet)
    und auch mit den Gif's -- also diesen animierten bewegten Bildchen
  • Aber achte darauf, dass du die Bildadresse (Url) immer komplett kopieren kannst -- am Ende der Adresse sollte eigentlich immer .jpg -- oder .gif stehen

zum Webspace --> dem Bildablageplatz für deine Bilder

  • Also deine Bilder müssen bereits im Internet sein -- dazu braucht man erstmal Webspace (Ablageplatz im Internet)
    denn die Bilder auf deinem PC sieht im Internet keiner
    Hier wird Webspace gut erklärt:
  • Was ist Webspace?....   Fragen zu Webspace?....

Hier nun die Links zu den Hilfeseiten der Ebay-HTML-Forum-Leute:

Tips und Tricks für schöne und bestens bebilderte Ebay-Auktionen,aber auch für Websitegestaltung: --
Jegliche Verwendung der dort vorgefundenen Quelltexte und Tipps sind erwünscht und kostenlos.
Aber: Direktes Verlinken von z.B. Bildern dieser Hilfeseiten auf andere Webseiten ist nicht ok!!


Wohin aber im Internet die Bilder für Ebayauktionen ablegen?


zu http://www.pixum.de -->

  1. Pixumbilder und Pixum-Dia-Show direkt in Auktionen verlinken, ist leider nimmer gestattet
  2. Aber auf einer Website oder in der Ebay-.Michseite ist dies kein Problem
  3. Man kann ja in einer Auktion darauf hinweisen, dass auf der Michseite ein Link zu einer Dia-Show steht.. mit vielen Bildern zu dem zu versteigernden Artikel
  4. Beispiel für eine Pixum-Dia-Show:
  5. Hier ein Link zu einer 21 Bilder-Dia-Show
  6. Das Pixum-Album muss unbedingt auf öffentlich stehen, sonst funktioniert es nicht.>
  7. >>>Siehe unter Albenstatus -- auf das Album klicken -- Legen Sie die Kategorie und den Status fest -- Kategorie wählen und auf öffentlich klicken -- Jeder Besucher darf die Bilder sehen und bestellen<<<<
  8. Mit Pixum sind 100 und mehr Bilder für eine Auktion kein Problem -- aber nur mit dem Link zur externen Diashow.
  9. Am besten einen Link setzen,der ein neues Fenster (mit der Dia-Show) öffnet
  10. Der Link in der Auktion sollte genau so reingestellt werden:
    <A HREF="HierDenLinkZurDiashow" TARGET="_blank">HierDenTextDazu</A>

  • Verwende niemals nie --> Yahoo, bilderservice.de, MSN-Alben
    um Bilder in Auktionen oder die "Mich" zu verlinken!!
  • Diese Bilderablagen ändern nach kurzer Zeit die Url./Bildadresse
  • Dann sieht man "dort" bald nur noch sowas kreuz statt einem Bild
  • Das gilt natürlich auch für Pixum-Bilder (dort nur die Dia-Show verwenden, siehe Punkt 8)



Farbnamen-Generator
Netscape Farben-Namen, Netscape und Internet Explorer Farben-Codes

Farb-Name: Hexadezimalnotation:

aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenred
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia

gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose

moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

 

 


disclaimer.....Link "Klick hier" Valid HTML 4.01 Transitional