Stacking commands to do many things at once.
Quote:
Originally Posted by
rlhanson
I did run into a couple of glitches as I was changing things.
When I added the images to select as a background, I lost the ability to go back and select a color.
So, what I did was make the color selection a drop down menu list, and then added "no image" to the buttons for the background images with a value of a clear pixel gif.
For some reason, if I just left the value as "transparent" it still would not allow the color change.
Anyway, it works this way to be able to go back and forth.
Take note of what I have said about stacking JS commands.
Give this an id so you can access it
HTML Code:
<input id=noImageRadio name="radiobutton" type="radio" tabindex="7" value="transparent" onClick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)'" />
No Image <br />
and stack up some javascript
eg:
HTML Code:
<input name="radiobutton" type="radio" id="purple" value="#9900FF" tabindex="3"
onClick="document.getElementById('cardTemplate').style.backgroundColor=this.value;
document.getElementById('noImageRadio').checked=true;
document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';" />
Untested, but that is the general concept.
I put the JS commands on separate lines for reading purposes, but in code they need to be on the same line.
Using an image as a checkbox
HTML Code:
<input type="image">
This is a submit image in HTML. What you want is:
HTML Code:
<input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" >
<IMG src="../images/designer/bold.jpg" style="cursor:pointer"
onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? normal' : ''bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
Did you follow that?
More complicated but pertier? Try this:
HTML Code:
<IMG src="/images/designer/normal.jpg" style="cursor:pointer"
onClick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold');
this.src=(document.getElementById('BOLDcompanyName').value==bold ? '/images/designer/bold.jpg') : '/images/designer/normal.jpg');
document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
Again, I added linefeeds to make it more visible here. NEVER use linefeeds in an onClick, onMouse or anything but a function (which we have not gone into, but may need to soon depending on how you catch up).
Now your bold button can change its image to show if it is pressed in or not, providing you provide the 2 images.
So, what we are doing is, we script a hidden text area to store our result.
input type="hidden"
and we use an image with an onClick. That will not submit the form.
And since an image does not pass a POST value, that is why we need the hidden one, sort of like a scratch pad.
NOW, The onClick in detail.
First command,
HTML Code:
document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold');
This is our hidden object
document.getElementById('BOLDcompanyName')
This is what it contains.
document.getElementById('BOLDcompanyName').value
So what do we assign to it? This.
HTML Code:
document.getElementById('BOLDcompanyName').value==bold ? 'normal' : 'bold')
If the value is bold, change it to normal. Otherwise make it bold. A simple toggle.
BOLDcompanyName = (condition ? value if true : value if false)
OK, so BOLDcompanyName now contains the value we want, so lets change the image to show that.
Second command,
Is it bold? Then change our image src to the bold image, otherwise show the normal image again
HTML Code:
this.src=(document.getElementById('BOLDcompanyName').value==bold ? '/images/designer/bold.jpg' : '/images/designer/normal.jpg');)
Third Command: Change the style of companyName in the preview to whatever the value is in BOLDcompanyName
HTML Code:
document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;
Voila!
Now I have kept the long form of everything so you can see it better. As an example, this is how I myself would do it, but while it is more readable to me, its not good for beginners. So, for the curious:
HTML Code:
<IMG src="/images/designer/normal.jpg" style="cursor:pointer"
onClick="boldObj=document.getElementById('BOLDcompanyName');
boldvar=(boldObj.value==bold ? 'normal' : 'bold');
this.src='/images/designer/'+boldvar+'.jpg';
document.getElementById('companyName').style.fontWeight=boldvar;"/>
... or maybe it looks less chinese?