Bilderrahmen ändern auf Klick

Roland Rafael Repczuk

Hallo mal wieder

Ich möchte gerne meinen Homepagegästen die Möglichkeit geben, dass sie meine Bilder mit verschiedenen Rahmen betrachten können. Damit ich aber nicht jedes Bild ganz oft mit verschiedenen Rahmen abspeichern muss, möchte ich gerne, dass man auf eine Rahmenfarbe klickt und das Bild dann mit der gewählten Farbe angezeigt wird. Ich habe euch eine PDF hochgeladen... So habe ich mir das vorgestellt... Wie muss ich das machen... Mit Flash / Java / etc. ?

Ich bitte um Hilfe
Roland

driver

du könntest den rahmen als div-container machen und dann des bild
drin zentrieren. mit javascript kannste die farbe des containers dann
immer verändern...

Grevas

HTML

<!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=utf-8">
<title>title</title>


<script type="text/javascript">
<!--
function change_bg(color) {
    var div = document.getElementById('rahmen');
    div.style.backgroundColor = "#" + color;
}


//-->
</script>
</head>
<body style="margin: 0; padding: 0;">
<div id="rahmen" style="background-color: yellow;float: left;">
    <div style="padding: 23px;">
        <div style="height: 350px; border: 2px inset #ccc;">
            <img src="bilder/Apocalyptica_007.jpg" width="250" height="350" alt="apocalyptica" />
        </div>
    </div>
</div>


<div style="margin-left: 350px; background-color: #ccc; width: 200px;">
    <div style="padding: 25px;">
        <div style="width: 150px;">
            <button onclick="change_bg('000');" style="background-color: #000; width: 150px; border: none; height: 25px;"></button>
            <button onclick="change_bg('111');" style="background-color: #111; width: 150px; border: none; height: 25px;"></button>
            <button onclick="change_bg('222');" style="background-color: #222; width: 150px; border: none; height: 25px;"></button>
            <button onclick="change_bg('333');" style="background-color: #333; width: 150px; border: none; height: 25px;"></button>
            <button onclick="change_bg('444');" style="background-color: #444; width: 150px; border: none; height: 25px;"></button>
            <button onclick="change_bg('555');" style="background-color: #555; width: 150px; border: none; height: 25px;"></button>
        </div>
    </div>
</div>
</body>
</html>

Alles anzeigen

css anpassen und outsourcen darfst du selber

Roland Rafael Repczuk

Erst einmal vielen Dank für die Antwort... Eigentlich funktioniert alles. Kann ich denn auch statt Farben Bilder einsetzten? Wenn ja, wie?

Grevas

http://www.google.de
"javascript bilder ändern"

Roland Rafael Repczuk

Kannst du mir den Code bitte umschreiben... Ich hab danach schon gegoogelt, aber ich komme damit nicht zurecht! Bitte!!!

Grevas

Pack mal die Seite die verändert werden muss (.rar oder .zip) und lad sie auf dein Server. Schick mir den Link per PM. Dann musst dich wenigstens da nicht selbstreinfrimmeln, ist kein so großer Aufwand denk ich.

Ahja und schreib mir dann auch die Ordnerstruktur in der PM, also in welchem Ordner deine index.html / .php ist und den relativen Pfad zu den Bildern + den Bildernamen.

Wenn deine Bilder unterschiedliche größen haben, wird das mit der Grafik allerdings ein stückchen "komplizierter"... Fals du ICQ haben solltest, kannst mir deine Nummer auch in der PN schreiben.

Derzeit hab ich leider ziemlich viel um die Ohren, also erwarte in den nächsten Tagen kein Ergebniss

Tags