PDA

View Full Version : User change background image?


MrBrit
08-16-2008, 11:41 AM
Hi all, I have a website that displays stained glass designs in different coloured window frames. I have created a different page for eac coloured window and the same designs show up in each different coloured window. What I would like is for the user to be able to click a button for example a blue button and the window frame turns blue.

it is hard to describe but the designs pages I have created is here http://www.leadbitterglass.com/designs.htm and you will see that there are 3 different pages for fanlights and many differnet pages for doors but what i would like to do is just have 1 fanlight page and 1 door page with the user changing the background image of the door frame to the colour they want

can this be done in dreamweaver?

I am using dreamweaver mx

cheers

Chapo
08-16-2008, 12:37 PM
Of course you can change the BG of the doors to any color. Just create the different colors of the doors and like you did with the stain glass... add a "Swap Image" to the doors to any color they want. But the way i will do it will be instead of "mouse over" i wil do it "on click" for the doors BG effect, this way you can combine both effects at the time of the stained glass as mouse-over and the doors as click-on.

MrBrit
08-16-2008, 01:05 PM
my door image is a background image so as it is not a real image showing on my dreamweaver page, i dont know how to add the swap image to a background image but i will have a tray at this now and see if i can figure it out, thanks Chapo at least I know it can be done, now to figure it out

:)

MrBrit
08-16-2008, 03:37 PM
I cannot find how to create a rollover image that changes a background but I have uploaded a test page to help me explain it better

http://www.leadbitterglass.com/half_glazed_door_test.htm


The white door image on the right is the background to a table and I want to be able to click the blue or red squares below the door and change the white door into a blue or red door. I already have the blue and red door images to use. As the door is a background image, can I create a "swap image" for the background?, I have tried but cannot figure out how to so far

any help will be appreciated

:)

Cary
08-16-2008, 09:19 PM
The code can be changed so the door uses an img tag instead of being a background image.

Find this code (after you've made a backup of your page)
<table width="195" height="406" border="0" align="center">
<tr>
<td width="10" height="402">&nbsp;</td>
<td width="175" background="http://www.leadbitterglass.com/ourarchive/whitedoor.gif">
<table width="158" height="395" border="0" align="center">
<tr>
<td width="17" height="21">&nbsp;</td>
<td width="109" rowspan="2"><div align="center"><img src="http://www.leadbitterglass.com/ourarchive/target.gif" name="Image2" width="116" height="192" id="Image2"></div></td>
<td width="18">&nbsp;</td>
</tr>
<tr>
<td height="214">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="152">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>


And replace it with this code.
<table width="195" height="406" border="0" align="center">
<tr>
<td>
<div id="door">
<img src="http://www.leadbitterglass.com/ourarchive/whitedoor.gif" alt="" width="176" height="400">
<span><img src="http://www.leadbitterglass.com/ourarchive/target.gif" name="Image2" width="116" height="192" id="Image2"></span>
</div>
</td>
</tr>
</table>


Now place this CSS code in the head of the page:
<style type="text/css">
#door {
position:relative;
width:176px;
height:400px;
margin:0 0 6px 7px;
}
#door span img {
position:absolute;
top:27px;
left:30px;
}
</style>

Now you can try making it so the door image can be swapped.

MrBrit
08-17-2008, 01:26 PM
Thank you so much Chapo and Cary, I am now getting somewhere. I don't totally understand how it has worked but it is starting to work with the door changing colour on rollover. As Chapo said it needs to be a clickable button to change the door colour and not a rollover but I havent been able to make it anything other than a rollover so far so if anyone knows how i do this i would be very grateful. If you look at the page now you will see the door change colour when you hover over the blue square but it would be best if the blue square could click and change the colour of the door

http://www.leadbitterglass.com/half_glazed_door_test.htm

Thanks lads

MrBrit
08-19-2008, 01:14 PM
Could anyone please tell me if this can be done, I expect it can be but don't know where to start really, I have created the door images to change on rollover but need them to stay the selected colour ??

:)

Corrosive
08-19-2008, 04:03 PM
Could anyone please tell me if this can be done, I expect it can be but don't know where to start really, I have created the door images to change on rollover but need them to stay the selected colour ??

:)

I would do it with server behaviour 'show/hide layer' but you are using tables. My suggestion is to have three versions of the same page. White door, red door and blue door and just use what you have. I.e. the blue and red 'swatches' are links to the next pages. Shouldn't be too bad with download times as browsers should cache stuff like images if they are repreated.

Just a suggestion anyhoo. :)

MrBrit
08-19-2008, 04:08 PM
I was thinking of just doing that, linking to each page but I wanted to speed things up for the user. I am having to create about 8 pages as there are around 8 colours of door to choose from but at least it will look good.

I might try to change it in the future when I understand more about layers and css etc as I know nothing at the moment but if anyone knows an easy way for me to do it now, let me know please

many thanks

Rob_Che
08-20-2008, 02:16 PM
I think the clue may be in this code:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','../bluedot.gif',1)">


Rob

MrBrit
08-20-2008, 03:21 PM
Yeah, I think it could be a hack to that line but I aint no expert at code so don't know where to start. If anyone knows exactly what to try changing it to, I will give it a go

Thanks

MrBrit

Rob_Che
08-20-2008, 04:34 PM
Try here:
http://www.w3schools.com/htmldom/dom_events.asp