PDA

Click to See Complete Forum and Search --> : Display correct image

mandyjay
01-06-2004, 04:05 AM
Hi

I need some help with a script which 'basically' needs to do the following:

I am developing a website with various section which have the same content but just change an image at the top of the page (determined by the industry sector the user is in). In order to make the site management easier I need to be able to determine the image by which link on the site the user clicked.

At the minute I have around 5 copies of each page and any changes have to be made to each of the them. I need to get round this and just have one page which shows the correct image.

I think I just need to store a variable maybe in a cookie which determines which section of the site the user is in and shows the right image accordingly. If the user goes into another section of the site the variable would change?

I have been on maternity leave for a few months so i'm a bit rusty!

Any help would be greatly appreciated.
Pittimann
01-06-2004, 04:11 AM
Hi!

Can you please specify, if you are using frames (or mabe post some code)???

Cheers - Pit
mandyjay
01-06-2004, 04:17 AM
Thanks for your reply

I'm not using frames and I don't really have any code that would help but i'll try and clarify the problem a little.

On the website I have 5 sections each relating to a different industry sector. However the content within these sections is identical. Each of the 5 sections has approximately 20 pages (all identical to the 20 pages in the other 4 sections). The only thing that I would like to be different is a banner image at the top of the page. I would like this image to be industry specific.

At the minute I have 5 copies of each page which all have to be maintained separately which is a bit of a pain.

In an ideal world the image that is displayed would be determined by which section the user has clicked. This, I hope, would enable me to have just one copy of each page and a bit of code that puts the correct image at the top.

Does this make sense?

Thanks
Mandy
Pittimann
01-06-2004, 04:23 AM
Hi!

It makes sense! And I understood you with your first post. It is just essential to know, whether you use frames or not, because a script for you if you use frames will look totally different from one if you don't.

Are you sure, that the links are in the same frame, like your pages' contents?

Cheers - Pit
mandyjay
01-06-2004, 04:31 AM
I don't know if it's having a baby that messes with your head or whether i'm just having a blond moment but I am sort of using frames!

This is the index code:
<HTML>
<HEAD>
<TITLE>Bartec Systems: Solutions for Pharmaceutical and Automotive Environments</TITLE>
<META NAME="Author" CONTENT="Creative Storm Ltd">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="systems.css">
</HEAD>
<BODY topmargin="0" leftmargin="0" LINK="#0075BA" VLINK="#0075BA" ALINK="#0075BA" background="images/background5.jpg">

<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="64"><iframe src="banner.html" name="banner" noresize scrolling="auto" hspace="0" vspace="0" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe></td></tr>
<tr><td>

<table height="100%" width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="180" valign="top"><iframe src="buttons.html" name="buttons" noresize scrolling="auto" hspace="0" vspace="0" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe></td>
<td width="5" background="images/background4.jpg">&nbsp;</td>
<td valign="top" width="450">


<IMG SRC="images/pharmaceuticals_montage.jpg" width="450" height="76">

<P align="justify">Bartec Systems create innovative solutions for traceability and control in demanding environments, with specialist solutions for the pharmaceutical, automotive and electronic assembly sectors. Our systems are hard at work in some of the worlds leading companies providing control of materials and processes from production through to distribution.</P>

<table border="0">
<tr>
<td width="50%" colspan="2" valign="top">
<P align="center"><B>Eutechnic<BR>Pharmaceutical Edition</B></P>
</td>

<td width="5" background="images/background4.jpg">&nbsp;</td>

<td width="50%" colspan="2" valign="top">
<P align="center"><B>Barcode Labelling Systems<BR>&nbsp;</B></P>
</td>
</tr>

<tr>
<td width="25%" valign="top">
<P><IMG SRC="images/eutechniclogo.jpg" align="left" valign="top" width="100" height="100"></P>
</td>

<td width="25%" valign="top">
<P>Warehouse Management and Stock Control system<BR><BR><BR>
<A HREF="pharmaceuticals/eutechnic.html">More ></A></P>
</td>

<td width="5" background="images/background4.jpg">&nbsp;</td>

<td width="25%" valign="top">
<P><IMG SRC="images/labelsoftware.jpg" align="left" valign="top" width="100" height="100"></P>
</td>

<td width="25%" valign="top">
<P>Simple and enterprise-level labelling solutions<BR><BR><BR><BR>
<A HREF="labelling/labellingsoftware.html">More ></A></P>
</td>
</tr>

<tr><td colspan="5"><HR></td></tr>

<tr>
<td width="50%" colspan="2" valign="top">
<P align="center"><B>In-Line Packaging<BR>Security Systems<BR>&nbsp;</B></P>
</td>

<td width="5" background="images/background4.jpg">&nbsp;</td>

<td width="50%" colspan="2" valign="top">
<P align="center"><B>Teklynx BackTrack<BR>Tracking System</B></P>
</td>
</tr>

<tr>
<td width="25%" valign="top">
<P><IMG SRC="images/matrix2000.jpg" align="left" valign="top" width="100" height="100"></P>
</td>

<td width="25%" valign="top">
<P>High-performance in-line packaging verification systems<BR><BR><BR>
<A HREF="packagingsecurity/index.html">More ></A></P>
</td>

<td width="5" background="images/background4.jpg">&nbsp;</td>

<td width="25%" valign="top">
<P><IMG SRC="images/backtrackbox.jpg" align="left" valign="top" width="100" height="100"></P>
</td>

<td width="25%" valign="top">
<P>Simple asset and stock tracking systems with integrated barcoding<BR><BR>
<A HREF="materialscontrol\backtrack.html">More ></A></P>
</td>
</tr>

</table>


</td>
<td width="5" background="images/background4.jpg">&nbsp;</td>
<td width="150" valign="top"><iframe src="news.html" name="news" noresize scrolling="auto" hspace="0" vspace="0" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%"></iframe></td>
</tr>
</table>


</td></tr></table>
</BODY>

</HTML>

The buttons are in an iframe but the bit that is different on each page is the montage.jpg which is on the main bit of the page.

Am I beyond help?!
mandyjay
01-06-2004, 04:35 AM
For extra information the website is www.bartec-systems.com.

The particular bit i'm having trouble with is the industry section on the left. If you look at say materials control under pharmaceuticals and under automotive they are the same apart from the montage thing at the top. At the minute they are 2 separate pages.

Thanks so much
Mandy
Pittimann
01-06-2004, 07:08 AM
Hi!

Sorry - but I think, I have to disappoint you.

In the first place, the subpages you mentioned differ in text as well and not only in the image. Technically, it would be easy to do what you want, but for sure you would have more work to achieve what you desire than when you leave things like they are.

Anyway, you could take into consideration to rebuild the whole site. At present, always the whole window is updated, when a link is clicked. You could leave the buttons iframe untouched (of course you would need a different menu with real submenus appearing depending on the link clicked) and have another iframe in the table in the middle which will be updated according to the user's choice...

If nevertheless you like to know, how to do what you mentioned, please post again...

Cheers - Pit
mandyjay
01-06-2004, 07:18 AM
Hi

Thanks for your reply

They are likely to differ in text at the minute as they have not necessarily been updated. Once complete the only thing that will differ is the image.

I'm almost positive it is achievable but just not sure how to do it. My thought is that when the user clicks on the button on the left a cookie is set. Then all the subsequent pages will display the image relating to the variable set in the cookie.

I presume it is possible to set a cookie to say 'pharmaceutical' when a hyperlink is clicked. Then it would go something like:
if cookie = pharmaceutical
then img src="images/pharmaceutical.jpg".

Sounds simple in my head but i'm no programmer!
clairec666
01-06-2004, 07:21 AM
Sorry to butt in and probably confuse you considerably......................

Would it be worth using PHP to determine where the user has come from, and this would write the picture-code in hard-code on the page, instead of using javascript?
Does your server support PHP?
Pittimann
01-06-2004, 07:26 AM
Hi!

There is no need for setting a cookie (even though that would be a way). Seems, you just don't know, how to change the image. Is that correct?

Cheers - Pit

Btw, clairec666, of course PHP could solve the prob as well :p
mandyjay
01-06-2004, 07:27 AM
Thanks for butting in and welcome to the strange world that is my messed up head!

Not sure if the server supports PHP...i'm sure it does though. It claims to support everything! Can we assume it does if you have a solution. I'll move servers if necessary!

If PHP is the solution though I really would be stumped! I'm not a programmer but I know html and enough javascript to blag my way through...after that i'm a hopeless case!

Thanks again
Mandy
mandyjay
01-06-2004, 07:29 AM
Hi Pit

I'm not sure (confused face pulling ;0~)

What is your alternative thought?

Just bear in mind that there will be duplicate pages which would need a different image on each.

Thanks
Manyd
clairec666
01-06-2004, 07:39 AM
Sorry, butting in again.......... :D

Some of the intelligent lovely people on here should be able to put together a PHP script for you, sadly it's far too complex for my little brain :( I haven't got my PHP book with me to help me. But it would be an easy solution. Your original pages would contain hidden form values which say which page they are coming from, and when they click on the link, the form is submitted to the second page, it contains PHP code which works out where they have come from based on the form values, and shows the relevant picture.
mandyjay
01-06-2004, 07:43 AM
Would that still work if the page they are coming from is a buttons page with lots of links on? Would the value be set on the actual hyperlink click rather than the page?

My head is starting to hurt!!!

Thanks lots for all your suggestions.
Mandy
clairec666
01-06-2004, 07:45 AM
Yes, it should still work............ I can't help any more, I know it can be done with PHP but I can't work out the code. Somebody else should be able to help, if it's confusing you, don't try to understand it, just ignore everything I've said, and it won't make you feel suicidal :D
Pittimann
01-06-2004, 07:48 AM
Hi!

Here is one of many ways.

1) the menu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<a href="blah.htm?iParm=1">Link 1</a><br>
<a href="blah.htm?iParm=2">Link 2</a><br>
<a href="blah.htm?iParm=3">Link 3</a><br>
<a href="blah.htm?iParm=4">Link 4</a><br>
</body>
</html>

2) blah.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function loadImg(){
var variablesSent = (location.search) ? location.search.substring(1, location.search.length) : table_of_contents;
var params = new Array();
var pairs = variablesSent.split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
if (nameVal[1]==1){
document.changeMe.src="1.jpg";
document.changeMe.alt="Link 1 was clicked";
}
if (nameVal[1]==2){
document.changeMe.src="2.jpg";
document.changeMe.alt="Link 2 was clicked";
}
if (nameVal[1]==3){
document.changeMe.src="3.jpg";
document.changeMe.alt="Link 3 was clicked";
}
if (nameVal[1]==4){
document.changeMe.src="4.jpg";
document.changeMe.alt="Link 4 was clicked";
}
}
//-->
</script>
</head>
<body onload="loadImg()">
<img src="dummy.gif" alt="&nbsp;blah0&nbsp;" border=0 name="changeMe">
<br><br>Bunch of text here...
</body>
</html>

If you need further assistance, just post again...

Cheers - Pit
mandyjay
01-06-2004, 08:32 AM
This solution works for the first click through but it doesn't seem to work over a number of links? Ie. if there was then a link from blah.htm to blah2.htm I would still need the correct montage to show.

I would need that variable to be stored until the user clicked on another section.

Thanks though...I feel we are getting very close!

Mandy
Pittimann
01-06-2004, 08:41 AM
Hi!

I thought, you want to avoid using different files and just have one file with an image depending on the link having been clicked :confused:

So I didn't see a need to go further to another file. Could you please explain, what you have in mind?

Cheers - Pit
mandyjay
01-06-2004, 08:52 AM
Hi

That is partly true but if in any section you have a link to a page you could also have a link through from that page to a follow on page and I would need the image to still display correctly. (These follow on pages would also be duplicated in different sections)

Is it possible for the 'variable' that has been to stay until a different link on the main button bar is clicked thus overwriting it?

Thanks for your patience...i'm sure you must be getting bored with me by now!!!

Cheers
Mandy
Pittimann
01-06-2004, 09:11 AM
Hi!Thanks for your patience...i'm sure you must be getting bored with me by now!!!I'm not!

The easiest way would be to have the links to blah2.htm look the same. Here is a slightly altered blah.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var storeLink;
function loadImg(){
var variablesSent = (location.search) ? location.search.substring(1, location.search.length) : table_of_contents;
var params = new Array();
var pairs = variablesSent.split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
storeLink=nameVal[1];
if (nameVal[1]==1){
document.changeMe.src="1.jpg";
document.changeMe.alt="Link 1 was clicked";
}
if (nameVal[1]==2){
document.changeMe.src="2.jpg";
document.changeMe.alt="Link 2 was clicked";
}
if (nameVal[1]==3){
document.changeMe.src="3.jpg";
document.changeMe.alt="Link 3 was clicked";
}
if (nameVal[1]==4){
document.changeMe.src="4.jpg";
document.changeMe.alt="Link 4 was clicked";
}
}
function proceed(){
location.href="blah2.htm?iParm="+storeLink;
}
//-->
</script>
</head>
<body onload="loadImg()">
<img src="dummy.gif" alt="&nbsp;blah0&nbsp;" border=0 name="changeMe">
<br><br>Bunch of text here...
<a href="javascript:proceed();">goto blah2.htm</a>
</body>
</html>

blah2.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var storeLink;
function loadImg(){
var variablesSent = (location.search) ? location.search.substring(1, location.search.length) : table_of_contents;
var params = new Array();
var pairs = variablesSent.split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
storeLink=nameVal[1];
if (nameVal[1]==1){
document.changeMe.src="1.jpg";
document.changeMe.alt="Link 1 was clicked";
}
if (nameVal[1]==2){
document.changeMe.src="2.jpg";
document.changeMe.alt="Link 2 was clicked";
}
if (nameVal[1]==3){
document.changeMe.src="3.jpg";
document.changeMe.alt="Link 3 was clicked";
}
if (nameVal[1]==4){
document.changeMe.src="4.jpg";
document.changeMe.alt="Link 4 was clicked";
}
}
function proceed(){
location.href="blah3.htm?iParm="+storeLink;
}
//-->
</script>
</head>
<body onload="loadImg()">
<img src="dummy.gif" alt="&nbsp;blah0&nbsp;" border=0 name="changeMe">
<br><br>Bunch of text here...
<a href="javascript:proceed();">goto blah3.htm</a>
</body>
</html>

and so on and so on...
Please replace the :p's in the code with ":" and "p";
Hope, that helps ;)

Cheers - Pit
mandyjay
01-06-2004, 09:53 AM
That looks like it will work. You're an absolute gem I could kiss ya :0 x

Just as a final thought...if I wanted to include (hypothetically!) 10 links from a page I would have to put javascript:proceed before each link and then I would have to add each link to the function. Is there any way round this as if the site grows this could be quite tedious and prone to errors?
mandyjay
01-06-2004, 10:02 AM
I've just looked through it again and I couldn't simply add the link to the function I would have to create a separate function for each link on a page.

I don't want to take up all your time but if you know of a solution to this I would really appreciate it.

Thanks
Mandy
Pittimann
01-06-2004, 10:49 AM
Hi!

Maybe this helps (altered blah2.htm):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var storeLink;
function loadImg(){
var variablesSent = (location.search) ? location.search.substring(1, location.search.length) : table_of_contents;
var params = new Array();
var pairs = variablesSent.split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
storeLink=nameVal[1];
if (nameVal[1]==1){
document.changeMe.src="1.jpg";
document.changeMe.alt="Link 1 was clicked";
}
if (nameVal[1]==2){
document.changeMe.src="2.jpg";
document.changeMe.alt="Link 2 was clicked";
}
if (nameVal[1]==3){
document.changeMe.src="3.jpg";
document.changeMe.alt="Link 3 was clicked";
}
if (nameVal[1]==4){
document.changeMe.src="4.jpg";
document.changeMe.alt="Link 4 was clicked";
}
}
function proceed(loc){
location.href=loc+"?iParm="+storeLink;
}
//-->
</script>
</head>
<body onload="loadImg()">
<img src="dummy.gif" alt="&nbsp;blah0&nbsp;" border=0 name="changeMe">
<br><br>Bunch of text here...
<a href="javascript:proceed('blah3.htm');">goto blah3.htm</a>
<a href="javascript:proceed('blah3b.htm');">goto blah3b.htm</a>
<a href="javascript:proceed('blah3c.htm');">goto blah3c.htm</a>
<a href="javascript:proceed('blah3d.htm');">goto blah3d.htm</a>
</body>
</html>

Another links in another files should be like that. Please note the little modification in the proceed function (and replace the :p's)...

Cheers - Pit
mandyjay
01-09-2004, 05:32 AM
Firstly to Pit - Thanks so much for your help earlier this week.

To everyone - hi :o)

Just wondered if I could pick all your brains again with a view to developing this problem further.

If the user was to leave the website then obviously the setting would be lost. Could anyone suggest a way round this? My thought is back to using a cookie which stays active for a set number of days?

Thanks
Mandy