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:
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.
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.
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.
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:
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!
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;
}
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>…
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?
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.
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.
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.