Javascript scripting help needed

Good evening,

I am a starting web developer and right now I use several supporting programs to design some basic sites. One of them is Serif Webplus. In this program they have some menus from which you can choose. One of them is the following slider:

http://www.destiny-consultancy.com/Test/

Now here is the problem. In the slider I can only activate the URL by clicking on the word (Home, Link 1 etc), but i really want the entire image to be clickable as a link. So far nobody has been able to help me because scripting knowledge is required to be able to do this. To make a long story short; how can i make every single image in the slider clickable, refering to a different URL. All the scripting files are attached.

Many thanks and regards,

Wes

You could just place the image a a background of the anchor, so your markup would look something like:
<a class=“slider home”>Home</a><a class=“slider link1”>Link 1</a>

Your CSS would be something like:
a.slider
{
display:inline-block;
height:60px;
width:30px;
}
a.slider.home
{
background:url(myImage1.jpg) top left;

}
a.slider.link1
{
background:url(myImage2.jpg) top left;
}

The sliding mouseover event should now be placed on the anchor. This should do the trick.

Hello TommiChi,

First of all thank you for your quick respons. Could you please explain this a little more step by step? My knowlegde is very basic so I need some more information to do the trick ;). Many thanks for your help so far.

Many regards,

Wes

Actually, all you have to do is change one of the CSS rules and you do not need to any of your markup or scripting:
.wp_navbar_concertina1 a:link, .wp_navbar_concertina1 a:visited, .wp_navbar_concertina1 a:hover, .wp_navbar_concertina1 a:active

I found the rule above in a style tag embedded in the page, and modified the properties as follows:

.wp_navbar_concertina1 a:link, .wp_navbar_concertina1 a:visited, .wp_navbar_concertina1 a:hover, .wp_navbar_concertina1 a:active {
border:medium none;
color:black;
display:inline-block;
left:0;
line-height:1;
outline:medium none;
padding-left:3px;
padding-top:7px;
position:absolute;
text-decoration:none;
top:0;
}

Hello again TommiChi,

I have changed the line to what you have told me. However it still does not turn the individual images into links. Matter of fact, there doesn’t seem to happen anything. Is there something I am doing wrong? I really hope you can help me out!

Many regards and thank you so much so far,

Wes

I looked on the test site you posted, but I did not see any of the changes that I suggested to you. I need you to run a test for me. After the very last “style” tag in the “head” section, I need you to insert the following tag:
<link rel=“stylesheet” type=“text/css” href=“test.css”>

Now I need you to create a text.css file, and place the following rule in it:
.wp_navbar_concertina1 a:link, .wp_navbar_concertina1 a:visited, .wp_navbar_concertina1 a:hover, .wp_navbar_concertina1 a:active {
border:medium none;
color:black;
display:inline-block;
left:0;
line-height:1;
outline:medium none;
padding-left:3px;
padding-top:7px;
position:absolute;
text-decoration:none;
top:0;
}

Hello TommiChi,

Thanks again for taking the time to help me. I did as you said, probably I did something wrong but here is the new testlink:

http://www.destiny-consultancy.com/Test/

I have created a ‘test.css’ and inserted the line you mentioned after the last Head tag. Do you have any idea what I am doing wrong?

Many thanks for your help and kind regards,

Wes

I am not seeing the link tag I asked you to insert. It should be inserted as the last tage, just before the closing </head> tag, so:
<link rel=“stylesheet” type=“text/css” href=“test.css” />
</head>
<body>…

Hello TommiChi,

In the Index.html I did as following:

–>
</style>
<script type=“text/javascript” src=“customnavtree1.js”></script>
<style type=“text/css”>
<!–
body {margin: 0px; padding: 0px;}
a:link {color: #2c3651;}
a:visited {color: #1f5b8b;}
a:hover {color: #2c3651;}
a:active {color: #2c3651;}

–>
</style>

<link rel=“stylesheet” type=“text/css” href=“test.css”>

</head>

I did inserted the last line before the head. Is this wrong?

Thank you and many regards,

Wes

Sorry, my bad, the link tag I asked you to insert is missing the closing slash, like so:
<link rel=“stylesheet” type=“text/css” href=“test.css” />

Now, when I go to the test and hover over the images, I can see the path of the link in the status bar, so I am not sure what else you need…

Changed it, but sadly enough still with no result:

http://www.destiny-consultancy.com/Test/

This is the script so far:

</style>
<script type=“text/javascript” src=“customnavtree1.js”></script>
<style type=“text/css”>
<!–
body {margin: 0px; padding: 0px;}
a:link {color: #2c3651;}
a:visited {color: #1f5b8b;}
a:hover {color: #2c3651;}
a:active {color: #2c3651;}

–>
</style>

<link rel=“stylesheet” type=“text/css” href=“test.css” />

The sliding images are still not clickable as a link:(

Do you have any idea what I am doing wrong?

Many regards,

Wes

Maye be misunderstood each other. This is what i try to reach:

http://www.destiny-consultancy.com/Test/help-image.jpg

Do you have any idea what i have to do or change??

Many regards,

Wes

Now, when I go to the test site and hover over the images, I can see the path of the link in the status bar, so I am not sure what else you need…

You can also see that the link is activated when you hover over the image also because the text changes color…

But what I want to reach is that by a left mouse click on one of the images, that the link will be activated (so by clicking on the image instead of the word). That is not the effect I get right now. The entire slider area should be clickable for each link. So if i want to go to Home on the example I also want to go there by clicking on the picture with the 4 people family on it. Do you understand what I am trying to reach?

Thank you so much so far,

Wes

Here is the point at which I ask you to pay closer attention.

In each slider area, the “a” tag is layered above the image. The CSS I provided places the anchor in the top left corner of the containing div and makes it take up 100% of the height and width. This should mean that the image is completely covered by the anchor, therefore clicking on the image should also redirect you to the URL that is in the href of the “a” tag.

As a test you can change the value of the hrefs (that are currently empty, which explains why nothing is happening), and you should see that you will jump to the page specified.

You should also see evidence of what I am talking about if you inspect the elements with firebug.

Hello Tommichi,

All that you are saying totaly makes sense. However i still don’t get it to work. As you can see the Home page in the test link is refering to a page. However with the given changes it still doesn’t work for me. Could it be that I use Internet Explorer instead of Firefox? Does the testlink work when you click on it now? If not, than what did i do wrong with the given information. I am sorry that I am asking this much, just really want it to work.

Many thanks for your help so far, hope that you can help me find out what I am doing wrong.

Many regards,

Wes

Just checked IE, and yes, it does behave differently from the rest. It means we might have to modify the markup a little bit after all. I don’t have the time this very second, but a bit later on today I will have another look at it.

Thank you so much that you are willing to look at it. It will help me so much. I really hope you can figure it out.

Many regards,

Wes