SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image Hotspot etc- Wordpress?

    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 was trying to add this in using the info I found at this page: http://allwebco-templates.com/suppor...phone-link.htm (basically it looks like a 'mailto' ahref but it is 'tel' instead.

    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!

    Many thanks

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <a href="http://www.atrium-music.co.uk/" title="Atrium Music"><img src="replacewithmyimagenameandpath.jpg" /></a>
    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?

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    <style type="text/css">
    dl.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;}
    a.LINK0 {left:10px; top:10px; background:transparent;}
    a.LINK0 {display:block; width:246px; height:0; padding-top:184px; overflow:hidden; position:absolute;}
    a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK1 {left:256px; top:10px; background:transparent;}
    a.LINK1 {display:block; width:208px; height:0; padding-top:58px; overflow:hidden; position:absolute;}
    a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK2 {left:465px; top:13px; background:transparent;}
    a.LINK2 {display:block; width:522px; height:0; padding-top:181px; overflow:hidden; position:absolute;}
    a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}
    a.LINK3 {left:259px; top:67px; background:transparent;}
    a.LINK3 {display:block; width:205px; height:0; padding-top:127px; overflow:hidden; position:absolute;}
    a.LINK3:hover {background:transparent; border:1px dashed black; color:black;}
    </style>

    <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?

    Many thanks

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bluejeans74 View Post
    I do not know how and where to add it? Does anybody know where I can add this code?
    This is more of a WordPress issue now, so I'll move this to the WP/CMS forum.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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>

    hope that helps

  9. #9
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, I have had trouble adding code, but I have found a sort of CSS workaround:


    <div class="map_image" style="background-image: url('http://www.atrium-music.co.uk/wp/wp-content/themes/new_atrium/images/atrium_header1.jpg');">
    <a class="map_link" id="map_link_0" title="Click to call us" href="tel:01515101410">Click to call us</a>
    <a class="map_link" id="map_link_1" title="Back to home" href="http://www.atrium-music.co.uk">Back to home</a>
    <a class="map_link" id="map_link_2" title="Back to home" href="http://www.atrium-music.co.uk">Back to home</a>
    <a class="map_link" id="map_link_4" title="Back to home" href="http://www.atrium-music.co.uk">Back to home</a>
    </div>

    <style type="text/css">
    .map_image { display: block; width: 990px; height: 197px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
    .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
    .map_image #map_link_0 { width: 226px; height: 45px; top: 4px; left: 247px; }
    .map_image #map_link_1 { width: 239px; height: 189px; top: 2px; left: 1px; }
    .map_image #map_link_2 { width: 740px; height: 136px; top: 57px; left: 246px; }
    .map_image #map_link_4 { width: 505px; height: 53px; top: 3px; left: 480px; }
    </style>

    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.

    Many thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •