Hello

[tallblondelady]

Hello all, I am new to your board and would like to say Hi. I have a few questions about some simple web page issues that I hope someone can answer for me.
I am sure that alot of you programmers out there have the same problem I am we thinks so complex that the simple things escape us at times. My delema is; I am designing a webpage for the company were I work. My marketing manager insist that the page be done is basic HTML (apparently she wants to make changes to the page instead of paying me to do them) for the life of me I can not remember the code to make an image change.
The idea is when you get to the home page you will have a series of links to take you to another page lets say the Schools page. when a person clicks on that link they will go to a page Titled Schools with a list of choices of actual schools we have designed. When you first come to the page you will see the menu(that never changes) a list of school names we have done, and two pictures on the right side of the page The pictures will be general to start but the idea is when you click on a name of a school, the two pictures will change to pictures of that particular school.
I am sorry this is so long, and that it may not be posted in the right place but if you let me know were to post from now on I will take care of it.
Thanks alot and HELLO again.

[Horus_Kol]

hiya - i'll move this to the client side forum, because the only way to do this kind of event is to use javascript "onmouseover" events.

[tallblondelady]

Thanks, I am sorry I am not sure how to use these forums

[¥åßßå]

I am sorry I am not sure how to use these forumsDead easy, you post anywhere yah want and trust the mods to move it to the right place :P

<script type="text/javascript">
function yChange(ypImage){document.getElementById('SchoolImage').src=ypImage}
</script>
<div onclick="yChange('school1.jpg')">School 1</div>
<div onclick="yChange('school2.jpg')">School 2</div>
<div onclick="yChange('school3.jpg')">School 3</div>
<div onclick="yChange('school4.jpg')">School 4</div>
<div onclick="yChange('school5.jpg')">School 5</div>
<img id="SchoolImage" width="200px" height="200px" src="DefaultImage.jpg" alt="A picture of a school" />

[tallblondelady]

If you look at the file I attached you will notice what I have to work with my marketing director insist that this not change, this file is the home page, you will notice the link on the left and the spaces for pics on the right. when a person clicks on a link on left it will bring up a new page. this new page will look exactly like the home page except for it will have a list of the projects that correspond with the original link the chose. the pics on the right will change based on which project they choose. Any help will be apreciated

[¥åßßå]

Do you want the images on the right to change on the home page or the page that pops up ?

[tallblondelady]

The homepage will stay as is (of course it still needs a little tidy work done to it)but on the new pages is where the pics will need to change.

[¥åßßå]

In that case I must be misunderstanding you slightly ?

You want different pictures on every new page, or, you want the new page to have links that change the pictures (and content ?) ?

[tallblondelady]

I am sorry I have a hard time explaining things, the file that I posted is my home page, on the left is a menu that will always be there, when a user clicks on a link ( say the k-12 link) a new page will open, what you will see is the menu on left, our company name on top, what will change will be the stuff in the middle and the pics on right.
the stuff in middle will be project names( example Manhutten middle school) when you click on the project name the page will not change, but the pictures will show that particlular project.

[GameSnaKe]

Isn't that just a href link changing inside a different frame?

[tallblondelady]

Exactley! but the catch is it is two photos of the project(like maybe interior and exterior) both of these need to change as each project is selected. I am in the process of cleaning up my code as soon as it is done I will post the clean version,

[¥åßßå]

Ok, sketched outline of your "projects" page<html>
<head>
<title>Title</title>
<script type="text/javascript">
function yChange(ypImage1,ypImage2){
document.getElementById('SchoolImage1').src=ypImage1;
document.getElementById('SchoolImage2').src=ypImage2;
}
</script>
</head>
<body>
Rest of site goes here

replace each of your "links" (for the projects) with <div onclick="yChange('image1.jpg','image2.jpg')">Link text</div>

replace your two images with :-

<img id="SchoolImage1" width="200px" height="200px" src="DefaultImage.jpg" alt="A picture of a school" />
<img id="SchoolImage2" width="200px" height="200px" src="DefaultImage2.jpg" alt="A second picture of a school" />

</body>
</html>

This is just basic, but it should show you what goes where ?

[tallblondelady]

Thankyou so much Yabba, it is embarrasing when you know something but it takes another person to remind you what to do. When I looked at that code it was like watching a familar movie all over again. Thank you so much. I am going to test it then I will post the results. Thank you again:D :rocker: