Hi, I have a problem that I don’t know if there is a solution! I hope I’m in the correct part of the forum (ie CSS) here goes:
Basically my website is designed in Artisteer (http://www.atrium-music.co.uk)
It was convenient for me because I got the correct layout and styles (I was also new to Wordpress when I did this).
However, I needed 2 ‘hotspots’ over my main header graphic and I have been trying to do them with css but didn’t know where to insert the HTML code (ie in the head.php?) and because I originally designed in Artisteer, I have not had to delve into too much of the ‘nuts and bolts’ of the website, thus meaning I am having trouble juggling parts of the CSS and corresponding HTML when it comes to things like this background image.
I need clients to be able to click on the main header graphic at the top of the page (ie the one that says ‘atrium’ and has the photos) and to be taken to the home page again.
However, if they hover over the phone number (and they are on a smartphone) I need the phone number to pop up and show them that they can click to call us.
I cannot get it to work and I don’t even know if it’s something that will work!
Could anyone point me in the right direction with a tutorial online? I have pretty much figured everything else out but this one has got me unstuck! Spent 4 hrs on it today looking at tutorials but no nearer!
I need clients to be able to click on the main header graphic at the top of the page (ie the one that says ‘atrium’ and has the photos) and to be taken to the home page again.
Wrap the <img> tag of the logo in the static link of your website.
However, if they hover over the phone number (and they are on a smartphone) I need the phone number to pop up and show them that they can click to call us.
Are you wanting image replacement on roll-over or a simple roll-over box?
Hi and thanks for your reply. Sorry I should have mentioned that the header image is a background graphic and that’s why I’m having problems, my CSS skills are not that strong! The only thing I have to go off at the moment is the following CSS (in my ‘style.css’):
div.art-header-jpeg
{
position: absolute;
top: 0;
left:-50%;
width: 990px;
height: 197px;
background-image: url(‘images/atrium_header1.jpg’); ----This is the header image
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
I understand that I should add some co-ordinates in the CSS- however I have been to a few sites that help me do this and I’ve created a proper image map, complete with seperate CSS code, but when I try to insert the CSS code I am putting it in the wrong place.
Yes, having a header that’s just a background image is not good design, because there’s no text for when images are disabled or for blind users (which includes Google).
Really, all text in the header should be real text, even if it’s being replaced by images. Ideally, though, the phone number should be in text, as then it will be easy for the phone to read it as a number (at least, that’s what happens on my phone).
So I would suggest you first rebuild the header with text and inline images to the width and height of the current header—say just independently on a test page to start with—and then look at how to integrate it into WordPress.
Thanks very much for your advice, I don’t think Artisteer has a function to do this but I will go back into the program and see what I can do, I will try to overlay the header as a foreground image then upload the theme again. Many thanks
Update: I’ve just gone into the software and unfortunately whatever I do it forces me to create the header as a background image. I do not know how to add text, links or phone number any other way because I guess the software is a ‘one size fits all’.
However I have seen a site online that creates imagemaps:
I added my graphic and created an image map and added rectangles. For the phone number, I created a rectangle hotspot over the number with the url of ‘tel:000000000’ (phone number goes here)
For the rest of the graphic, I created a few other boxes to cover the whole graphic. All of them point to the url of the home page.
They have given me the following code to add to Wordpress:
<dl class=“image_map”>
<dd><a class=“LINK0” title=“Back to the home page” href=“http://www.atrium-music.co.uk”></a></dd>
<dd><a class=“LINK1” title=“Click to call us” href=“tel:01515101410”></a></dd>
<dd><a class=“LINK2” title=“Back to home” href=“http://www.atrium-music.co.uk”></a></dd>
<dd><a class=“LINK3” title=“Back to home” href=“http://www.atrium-music.co.uk”></a></dd>
</dl>
However, I do not know how and where to add it? Does anybody know where I can add this code? And the site gave me the image complete with hotspots. Do I just save this with the same name as the original and then upload where the original image currently sits?
You need to add it to header.php file in your WP template. Some basic knowledge of PHP or at least HTML would be good at this point. you should find the file in wp-content>themes>theNameOfYourTheme>header.php
Incidentally you should use a DL ( and your DL is coded wrong anyway… use the following instead:
ul.image_map {display:block; width:990px; height:197px; background:url(http://www.atrium-music.co.ukhttp://…_header1.jpg); position:relative; margin:2px auto 2px auto;}
<ul class=“image_map”>
<li><a class=“LINK0” title=“Back to the home page” href=“http://www.atrium-music.co.uk”></a></li>
<li><a class=“LINK1” title=“Click to call us” href=“tel:01515101410”></a></li>
<li><a class=“LINK2” title=“Back to home” href=“http://www.atrium-music.co.uk”></a></li>
<li><a class=“LINK3” title=“Back to home” href=“http://www.atrium-music.co.uk”></a></li>
</ul>
I added this code and it’s worked! So pleased The phone number doesn’t show up as a clickable yellow box on an iPhone (does anyone know how to remedy this?) but if the user clicks on it on a smartphone it prompts the phone to call the number.
