Hello all! 
I'm learning JS now.. And I'm planning to do CSS after And I'll hope I'll be able to be helpfull to you one day too 
but now I have a question.
I'm working on my First Javascript.. Or what you call "script", It's sort off layout changer for a very basic Avatar: Tha Last Airbender Fansite; which is made by a 14y old girl; so it's really basic
And the "Layout" is more like a background image; with some Iframes with some content.
And The Layout changer is very simple infact; it just changes the background image
My plan was actually the following:
- somewhere on the site there is an Iframe which holds the Lay changer
- In that frame there are little preview pics of the other layouts; If you hold your mouse cursor on a preview picture; Tha background image changes; but when you get your cursor off the preview pic it returns to the original layout.
- If you click on the picture; the new layout stays for as long as you are on the site.
So thats the basic idea.
now; I already wrote some code; Which I thought was quite ok; but I don't know if all things will work; And I just realized I forgot something:
- I wrote tha script that chen you hold your mouse over it; it changes and when you get off your cursor it changes back to normal and when you click it it changes too; but when you get off your mouse when you clicked; it will still return to normal; because I think it counts as an Mouseoff event..
And I don't know how to do it with more layouts..
Here is the code I wrote:
And this is what you add to the HTML page:
Now I have the following questions:
- Is this code valid JS? (like if the links as variables will work?)
- How to Get the idea i posted befire (with the clicking thingy)
- How should the OrigLay() funtion be to do this with 3 or 4 layout images?
Or does anyone have other remarks?
thanx in advance!
~Gushe
I'm learning JS now.. And I'm planning to do CSS after
And I'll hope I'll be able to be helpfull to you one day too but now I have a question.
I'm working on my First Javascript.. Or what you call "script", It's sort off layout changer for a very basic Avatar: Tha Last Airbender Fansite; which is made by a 14y old girl; so it's really basic
And the "Layout" is more like a background image; with some Iframes with some content.
And The Layout changer is very simple infact; it just changes the background image
My plan was actually the following:
- somewhere on the site there is an Iframe which holds the Lay changer
- In that frame there are little preview pics of the other layouts; If you hold your mouse cursor on a preview picture; Tha background image changes; but when you get your cursor off the preview pic it returns to the original layout.
- If you click on the picture; the new layout stays for as long as you are on the site.
So thats the basic idea.
now; I already wrote some code; Which I thought was quite ok; but I don't know if all things will work; And I just realized I forgot something:
- I wrote tha script that chen you hold your mouse over it; it changes and when you get off your cursor it changes back to normal and when you click it it changes too; but when you get off your mouse when you clicked; it will still return to normal; because I think it counts as an Mouseoff event..
And I don't know how to do it with more layouts..
Here is the code I wrote:
| Code: |
|
<script type="text/javascript"> // the 2 background image links var emberlay = "http://i7.tinypic.com/82mx74j.jpg" var desertlay = "http://i16.tinypic.com/82vhw00.jpg" //the function to change into the second layout function DesertChange() { document.getElementById("Layout").src=desertlay } // the function to change into the first layout again (when you are temp on the second layout) function EmberChange() { document.getElementById("Layout").src=emberlay } // the function to return to the layout you had before holding your mouse over the image function OrigLay() { if (document.getElementById("Layout").src == emberlay) { DesertChange() } else { EmberChange() } } </script> |
And this is what you add to the HTML page:
| Code: |
|
add id="layout" to background image add onclick="Desertchange()" to the layout preview image add onMouseOver="Desertchange()" to the layout preview image add onMouseOut="OrigLay()" to the layout preview image |
Now I have the following questions:
- Is this code valid JS? (like if the links as variables will work?)
- How to Get the idea i posted befire (with the clicking thingy)
- How should the OrigLay() funtion be to do this with 3 or 4 layout images?
Or does anyone have other remarks?
thanx in advance!
~Gushe
