JS Replace function

[MilkyTech]

Let me start by saying that I am a bit of a newb when it comes to website development, however, I do know some basic html and am very resourceful in finding and "borrowing" code to accomplish what I would like.

Basically what I am looking to do is replace part of a webpage with a click rather than loading an entirely new page.

I found this great little piece of code to replace the content of a div:

function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}

<div
id="example1div"
style="border-style:solid;
padding:10px;
text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div','Whew! You clicked!')">
Click me to replace the content in the container.
</a>

ok, so this works great to place some text in the div but for me, I want to place multiple images that include links and mouseover effects.

I figured out how to replace the div with a single image as shown in my code here:

function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = '<img src="/images/webhours.png">';
}

<area shape="rect" coords="2,2,105,42" href="javascript:ReplaceContentInContainer('maincon')" onmouseover="activate1()" onmouseout="deactivate1()">

I suppose my issue is that I really don't want to replace the entire div, I just want to replace 1 image in the div and leave the rest of it intact and functioning.

Here is my site:
[buffalomooncoffee.com...] - Live site which has to load a whole new page to display my hours of business.
[buffalomooncoffee.com...] - New homepage I am working on to avoid loading a new page (check out the source code)
[buffalomooncoffee.com...] - My javascript file

I want to replace mainpage.png with webhours.png when you click on the image map link for the word "Hours".

The way it is now, the image gets replaced, but I lose the rest of the div (hours_map_menu.png image map and mouseover effects)

[daveVk]

onclick="document.getElementById('myImage').src='webhours.png';"

where image in question has id="myImage"

Welcome to forum

[MilkyTech]

I can't believe how simple that was.
worked perfect, thanks Dave.

Sorry about the links in my post, I read the sticky thread After I posted :-(

[MilkyTech]

ok, so now that that is working great can we take it a step farther:

is it possible to get the webhours image on the first click of "Hours" and then return to the mainpage image with the second click of "Hours"?

basically swap the 2 images each time you click?

[daveVk]

function toggle(id,a,b){
var img="document.getElementById(id);
if( img.src.indexOf(a) !== -1 ) { img.src = b; }
else { img.src = a; }
}

onclick="toggle('myImage','webhours.png','mainpage.png')"

[MilkyTech]

onclick="document.getElementById('myImage').src='webhours.png';"

why does this only work if 'myImage' is the id of an image and not of a form or a div?

[daveVk]

.src is a property of the image element NOT of forms or div elements. ie. where to get image from.

for a div you could use

onclick="document.getElementById('myDiv').innerHTML='hello sailor';"

is that is what you had in mind?

[MilkyTech]

onclick="document.getElementById('myDiv').innerHTML='hello sailor';"

Close. This replaces 'myDiv' with a little text. I want to replace 'myDiv' with the image "images/webhours.png"
or better yet, what I would really love to do is replace 'myDiv' with 'myForm', then the user would never need to navigate away from the homepage. Something like this:

onclick="document.getElementById('myDiv').?='myForm';"

I would imagine the problem with this is that 'myForm' is actually 20+ lines of HTML that can't reside in the original document since we don't want to see the form until it is called upon with a click

I tried having all of the forms HTML reside in the JavaScript file and call on it using innerHTML like this:

function replaceDivWithForm(){
var oldHTML = document.getElementById('myDiv').innerHTML;
var newHTML = "<form action="http://blablabla.com"><div><td><tr><input type="text" bla bla bla></td></tr></form>";
document.getElementById('myDiv').innerHTML = newHTML;
}
onclick='replaceDivWithForm()'

This didn't work. I don't know if only certain html tags are allowed or if only 1 html tag is allowed at a time or what.

[daveVk]

Keep it simple.

Put all the content in the page(particularly forms), with stuff not to be initially show hidden.

<div id="laterDiv" style="display:none">
... form stuff ...
</div>

when later comes

document.getElementById('laterDiv').style.display = '';
and maybe
document.getElementById('introDiv').style.display = 'none';

[MilkyTech]

That is so sweet!
works beautifully now that I positioned the divs correctly.
'laterDiv' must be positioned immediately after 'introDiv' in the HTML. I had it the other way around at first and it functioned but strangely. Seemingly random things would go wrong and sometimes would work correctly.

I created a function in my external JS file:

function swapform() {
document.getElementById('formdiv').style.display = '';
document.getElementById('maincon').style.display = 'none';
}

then called for it with this HTML:

<a href="javascript:swapform()">

using href instead of onclick so it would appear to be a link

Love this JavaScript stuff!

Ok, so remember the beginning of this thread when I wanted to keep swapping back and forth with 2 images?
I didn't use your toggle funtion as it was a little confusing to me so I went with this code that works great as well:

function swap(){

var obj0=document.getElementById('hoursarea');
var obj1=document.getElementById('myimage');
var flag=true;

obj0.onclick=function() {

flag==true?
(obj1.src='images/webhours.png',flag=false):
(obj1.src='images/mainpage.png',flag=true);
}
}

window.addEventListener?
window.addEventListener('load',swap,false):
window.attachEvent('onload',swap);

Problem now is that this image swap doesn't work after the 'formdiv' is swapped in and 'myimage' no longer exists.
I am wondering if I can add some sort of condition to this code so that if 'myimage' is no longer visible and 'formdiv' is, then execute this function as if obj1=document.getElementById('formdiv')?

I would love for you to see my website so you can see the whole picture. I know we aren't supposed to post links here, so I will tell you [shhhh] its the website associated with my profile.

[daveVk]

<a href="javascript:swapform()">

I would stick to onclick

<a href="#" onclick="swapform();return false;">

the return false ensure it does not try to go anywhere.

and 'myimage' no longer exists.

It may not be displayed, but still exists as far as the javscript is concerned.

Yes I don't see the whole picture.

It may be easier to include all images in page and use similar hide method as with form. As a bonus there is no delay onclick while images are being fetched from server.

as if obj1=document.getElementById('formdiv')

code expects obj1 to be an image !

[MilkyTech]

It may not be displayed, but still exists as far as the javscript is concerned.

does this mean that the image flip should still work after the form is swapped in?

perhaps now I am asking too much of my novice website development abilities :-(

[daveVk]

Yes the image flip should still work fine. However if the image is within the div being hidden it will also be hidden, is this the case ?

Check that your HTML validates to ensure it is being interpreted as you expect, the order of the divs you mentioned earlier should not be critical.

Also check javascript error reporting is turned on.