• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder interaktionsfähig machen.

xAeciid

xAeciid

Neues Mitglied
Hallo liebe html.de user!

Ich habe für einen Freund nun ein Bild entworfen welches aktuell noch nichts kann ausser schön aussehen. Im Grudnde würde das auch schon reichen, wäre dort nicht der Kaufen knopf welcher sowohl als ungedrückte wie auch gedrückte version vorhanden ist.

Ich würde nun gern erstmal den ungerückten knopf plazieren wobei dort meine Frage ist, muss ich den extra plazieren oder kann ich den einfach auf dem bild lassen.

Dann würde ich gern den gedrückten knopf als hover plazieren wobei dort eben die Frage ist ob das an eine bedingung geknüpft ist, z.B das vorher der ungedrückte knopf plaziert sein muss.

Den Hoverknopf würde ich zu guter letzt auch noch mit einem Link versehen wollen :)
 
Zuletzt bearbeitet:
Ohne zu wissen, wie das Bild aussieht, würde ich dazu raten, es in zwei Teile zu zerlegen, diese als Hintergrundbilder in zwei übereinander liegenden Boxen zu definieren, wobei die Hälfte mit dem Button dann mit der CSS-Psoidoklasse :hover beim Hovern ausgetauscht wird.
 
Hey Space Vampire, danke für deinen lösungsvorschlag.

Ich habe jetzt den html schnippsel der paypal box bekommen und verzweifel an dieser etwas. Ich habe jetzt ein wenig gegoogelt in kombination von paypal button mit hover und dort auch etwas gefunden:

http://www.hotscripts.com/forums/html-xhtml-xml/10133-paypal-button-mouseover-image.html

doch dies hat für mich nicht ganz so funktioniert.

Hier der normale code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="">
<table>
<tr><td><input type="hidden" name="on0" value="Username">Username</td></tr><tr><td><input type="text" name="os0" maxlength="200"></td></tr>
</table>
<input type="image" src="/images/kaufen.png" border="0" name="submit" alt="">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>

Hier hätte ich für den input type="image" gerne einen hover. Wie schon erwähnt, hat es mit der obigen variante bei meiner umsetzung nicht funktioniert. Danach würde ich diesen button gern an seinen platz auf den bild bewegen. Dort dachte ich an margin. Nur weiß ich gerade nicht, wie sich margin verhält wenn das bild in einem center tag liegt, da sich dieses ja bei der kleiner skalierung des browsers anpasst wäre das natürlich am ende ein knäul wenn ich die 3 paypal button nebeneinander mit margin lege und sie beim kleiner ziehen des browsers dann sonst wo sind..
 
Ich glaub du meinst sowas
Code: 
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
input[type=submit] {
padding:0;
width:200px;
height:40px;
border:1px solid #000;
background:url(pfad) no-repeat 0 0 #ddd;
}


input[type=submit]:hover {
background:url(pfad) no-repeat 0 -40px eee; /* Beispiel wenn Bild um 40 Pixel nach oben verschoben wird*/
}

</style>
</head>
<body>

<input type="submit"  name="button1" value=" senden ">
</body>
</html>

Es lassen sich aber auch noch mehr Pseudoklassen anwenden.
 
irgendwie faile ich gerade daran das auf das paypal code gedöhns anzuwenden da es für mich nicht ganz so durchsichtig ist, woher was kommt.
 
Du hast doch von Anmeldebutton gesprochen. Der opiege Code(CSS) ist doch ausreichend. Über die Funktionsweise des Formulars musst du dir doch keine Gedanken machen. Das soll dein Feund machen. Du bist der Grafiker. Oder?
Wenn dein Freund auch nicht so recht weiß was er machen soll, dann legt das Projekt auf Eis oder lasst es ein anderen machen, der sich damit auskennt.

P.S. Du könntest ja mal die Grafik hochladen, damit wir wissen wie das Ganze aussieht.
 
http://i.imgur.com/Xg8EpiT.png wäre der aktuelle stand der Dinge. Das ganze soll ja kein online shop o.Ä werden. Premium funktionen sind in vielen Foren ja schon "normal" und da er mich gefragt hat ob ich ihm sowas designen könnte habe ich dort auch direkt ja gesagt. Eine Enterpage auf der .com domain, welche eine sprachauswahl darstellt, deren flaggen farblich hovern und in den ecken grafik elemente hat die sich entsprechend der bildschirmgröße anpassen damit diese seite auf jeder auflösung gleich aussieht habe ich auch zusammen gebastelt bekommen in einem verlinkten .css und der index.html.

Das Problem ist viel mehr, das wir in dieser Forensoftware nicht mit extra seiten arbeiten sondern einem plugin welches .tpl datein erstellt welche html generell verarbeiten können und css nur über <style> </style> befehle was mich total verwirrt, daher funktionieren die üblichen dinge, die ich so gefunden habe und nach bestem wissen und gewissen ausprobiert habe auch nicht.

Aktuell ist das Hovern auch eher ne spielerei. Ich hätte jetzt nur noch gern die Paypal Felder nebeneinander unter der entsprechenden spalte positioniert. Wie stellt man das denn am besten über html an bzw mit css im html befehl?

Also ohne :
.Positionirung 1 {
...
...
...
}

Am Ende sollte dies dann so aussehen:

http://i.imgur.com/1AGHzWW.png
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben