WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image Map in Header (CSS created, difficulty placing) (2 posts)

  1. farz
    Member
    Posted 5 years ago #

    Morning,
    The site: http://thefward.com

    I'm new to WP and CSS but I have put together the code using various tutorials to create an image map with CSS. The issue I'm having is figuring out how to migrate this code into my theme. I am using Elements of SEO 1.2 by Drew Stauffer and these are the header files available:
    Header.php
    myheader.php
    myheader1.php

    I've managed to change the banner to a custom image but that's as far as I've gotten. The CSS for the image map is below (note, I'm having difficulty testing it so it may not be in fully working order).

    <div id="imgmap">
    	<img height="134" width="960" src="banner.jpg" alt="" />
    	<ol>
    		<li id="area1"><a href="http://thefward.com/?page_id=2">fward</a></li>
    	</ol>
    </div>
    
    #imgmap {
    	position: relative;
    	_zoom: 1;
    }
    
    #imgmap li {
    	position: absolute;
    	display: block;
    	list-style: none;
    	outline: 1px dashed;
    	overflow: hidden;
    }
    
    #imgmap li a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	_background: url(space.gif);
    	text-indent: -1000em;
    }
    
    #area1 {
    	left: 135px;
    	top: 12px;
    	width: 19px;
    	height: 19px;
    }

    Actually that looks like the code I pulled from http://riddle.pl/mappet/ and not what I came up with. If anyone has experience with this theme or can provide any advice I would appreciate it.

    Thank you,
    F

  2. farz
    Member
    Posted 5 years ago #

    I ended up using an HTML solution that seems to work well on FF and IE. For any others using this them: Please take note of the multiple header files (Header.php, myheader.php, myheader1.php) and move your code to the appropriate area. As an example in the header.php section I commented out

    <!--
    <div id="banner" onclick="location.href='http://thefward.com/?page_id=2'" style="cursor: pointer;">
    </div>-->

    And added my code below.

Topic Closed

This topic has been closed to new replies.

About this Topic