How Can I Add A Custom HTML Code? 
Author: Elsa-marie L.Hello. I have a small issue with adding two custom codes, one for my navigation menu, and one for an image in my product page.
I tried the various places where I can add a custom code, but nothing happens...
The navigation menu custom code is this (inspired by the navigation menu of Tiffany: http://www.tiffany.ca/ ):
<body>
<div id="button1" style="position:absolute;top:200px;left:500px;">
<img src="button1.png" style="position:relative;top:0px;left:0px;" onMouseEnter="foo1()">
</img>
</div>
<div id="button2" style="position:absolute;top:200px;left:300px;">
<img src="button2.png" style="position:relative;top:0px;left:0px;" onMouseEnter="foo2()">
</img>
</div>
<div id="button3" style="position:absolute;top:200px;left:700px;">
<img src="button3.png" style="position:relative;top:0px;left:0px;" onMouseEnter="foo3()">
</img>
</div>
<div id="frame" style="position:absolute;top:250px;left:200px;">
</div>
<script>
function foo1(){
document.getElementById("frame")[removed] = "<img src='frame.png' style='position:relative;top:0px;left:0px;' onMouseLeave='faa1()'></img>"; //engages frame1
document.getElementById("button1")[removed] = "<img src='button1b.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo1()'></img>"; //change color of button1
document.getElementById("button2")[removed] = "<img src='button2.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo2()'></img>"; //reset color of button2
document.getElementById("button3")[removed] = "<img src='button3.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo3()'></img>"; //reset color of button3
}
function foo2(){
document.getElementById("frame")[removed] = "<img src='frame2.png' style='position:relative;top:0px;left:0px;' onMouseLeave='faa2()'></img>"; //engage frame2
document.getElementById("button2")[removed] = "<img src='button2b.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo2()'></img>"; //change color of button2
document.getElementById("button1")[removed] = "<img src='button1.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo1()'></img>"; //reset color of button1
document.getElementById("button3")[removed] = "<img src='button3.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo3()'></img>"; //reset color of button3
}
function foo3(){
document.getElementById("frame")[removed] = "<img src='frame3.png' style='position:relative;top:0px;left:0px;' onMouseLeave='faa3()'></img>"; //engage frame3
document.getElementById("button3")[removed] = "<img src='button3b.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo3()'></img>"; //change color of button3
document.getElementById("button1")[removed] = "<img src='button1.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo1()'></img>"; //reset color of button1
document.getElementById("button2")[removed] = "<img src='button2.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo2()'></img>"; //reset color of button2
}
function faa1(){
document.getElementById("frame")[removed] = ""; //closes frame
document.getElementById("button1")[removed] = "<img src='button1.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo1()'></img>"; //reset color of button1
}
function faa2(){
document.getElementById("frame")[removed] = ""; //closes frame
document.getElementById("button2")[removed] = "<img src='button2.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo2()'></img>"; //reset color of button2
}
function faa3(){
document.getElementById("frame")[removed] = ""; //closes frame
document.getElementById("button3")[removed] = "<img src='button3.png' style='position:relative;top:0px;left:0px;' onMouseEnter='foo3()'></img>"; //reset color of button2
}
</script>
</body>
I tried both to add it to the Main Menu's HTML Code option, and to the Advanced Setting's HTML Custom Code, but nothing changed.
As for the custom image code, as follows (a code that makes an image, upon mouse-over, change to a bigger block with a simple description, price, and "click for more info", again like in Tiffany's product browsing page: http://www.tiffany.ca/jewelry/rings#p+1-n+10000-c+287466-s+5-r+-t+-ni+1-x+-pu+-f+-lr+-hr+-ri+-mi+-pp+ ):
<body>
<img src="pic1.png" style="position:absolute;top:200px;left:300px;z-index:1;" onMouseEnter="foo()">
</img>
<div id="newsquare" style="position:absolute;top:200px;left:300px;">
</div>
<img src="pic2.png" style="position:absolute;top:200px;left:550px;z-index:1;">
</img>
<img src="pic3.png" style="position:absolute;top:200px;left:800px;z-index:1;">
</img>
<script>
function foo(){
document.getElementById("newsquare")[removed] = "<div style='background-color:#0000ff;position:relative;top:-100px;left:-100px;height:400px;width:800px;z-index:5;border-size:3px;border-style:solid;border-color:black;' onMouseLeave='faa()'><img src='pic1b.png' style='position:relative;top:0px;left:0px;'></img></div>";
}
function faa(){
document.getElementById("newsquare")[removed] = "";
}
</script>
</body>
And that too, I tried it both by pasting it into the Advanced Settings's Custom Code, and by adding a HTML code Object to a Cell. Nothing happened there too.
What I am doing wrong?
Thank you.
Hello Kim Dion!
I can not say whether your code is wrong. But I do not know if you know, some codes and functions only works when the site is in the air, ie it is properly hosted and registered domain.
Tradução
Olá Kim Dion!
Não posso afirmar se o seu código esta errado. Porém não sei se você sabe, alguns códigos e funções só funciona quando o site está no ar, ou seja, ele está devidamente hospedado e com dominio registrado.
You need more then the code mentioned.
But the place is correct that is this one: Advanced Settings's -> Custom Code
Author
Then what I would need to add?
Because, for example, I love the current template I use (one of Website's own template), so I don't want to change anything else but these two modifications. So how do I go about it?
Thank you,
Kim
Author
Thank you, I will keep that in mind. I was aware that the Login/Registration function only worked when posted, but I wasn't aware that other functions too would only work when posted.
Kim,
For that I need to rip the full code from the website. I am not going to do that.
Where did you find the code? Maybe there is some code on internet that can do this that you can use or buy?
Author
Oh, I see. Is there a way I can see the website's HTML code within Website X5, so that I can work with it and integrate my custom codes within it?
The codes were created by my business partner, who trained in HMTL and Javascript for a few years now, based upon various codes on Internet. They fully work by themselves, if that's what you were worried about.
Then he should be able to help you. he should know where the files belong in x5 in the Advanced Settings's -> Custom Code
scripts and files needed can be added also in Advanced Settings's -> Custom Code