Image link not working?

(@ipstenu)

?????? Advisor and Activist

Yoru HTML is bad.

Change this:
<a href="#"><img src="images/kc.png" width="208" height="80"</a></a>

To this:
<a href="#"><img src="images/kc.png" width="208" height="80" /></a>

Thread Starter

(@justinvanheel)

Already did it as I saw the typo. Ain’t working either ??

Moderator

(@ipstenu)

?????? Advisor and Activist

Where do you have <a name="#"> defined?

And can you toss a link up to the page?

Thread Starter

(@justinvanheel)

Aye this is the link to the image Click ??

What do you mean defined?

Even if I put a link into this it doesn’t work either

<a href="https://google.com"><img src="images/kc.png" width="208" height="80" /></a>

Though – If i put an alternate like

<a href="https://google.com"><img src="images/kc.png" width="208" height="80" alt="xxx"/></a>

The xxx shows up and that is clickable which will redirect you to google.com for example

Moderator

(@ipstenu)

?????? Advisor and Activist

Wait, you mean the image doesn’t show up? That’s different from ‘the link doesn’t work’!

Try putting in the FULL path for the image: https://mydomain.com/images/kc.png

Thread Starter

(@justinvanheel)

I never said the image is not showing up. Point is that as soon as I put an alternate the alternate text will show up OVER the image which is clickable.

Moderator

(@ipstenu)

?????? Advisor and Activist

Sorry, but clearly I’m missing something.

Can you explain ‘what’ isn’t working? This:

My image link is not working

Implies that the link URL is bad.

But this:

as soon as I put an alternate the alternate text will show up OVER the image which is clickable.

Implies that the IMAGE is not showing up at all. Which given your original code, yeah, it wouldn’t.

What do you mean by ‘My image link is not working?’

Does the image show up?
Can you click on the image?
Can you share the link of the webpage where all this is happening? Sometimes seeing things in context helps ??

Thread Starter

(@justinvanheel)

Aye but my website ain’t running online my dear friend. Im still being busy in localhost. In my CSS I’ve got a background image right? :).

I cannot click on the image. You know what I mean?

So to make clear

Does the image show up?
Can you click on the image?
Can you share the link of the webpage where all this is happening? Sometimes seeing things in context helps ??

1. Yes
– I know it shows up as a background image defined in the CSS.
– I also know it doesn’t show up as coded in the HTML
2. No
3. Can’t as im still on localhost.

Moderator

(@ipstenu)

?????? Advisor and Activist

Well. Yeah. You can’t click on a background image ?? You have to trick it with the text.

Add this to your css

#header #topright {
  text-align: right;
  float: right;
  margin-top:6px;
  margin-right:-15px;
  background-image:url(images/kc.png);
  background-repeat:no-repeat;
  width:208px;
  height:80px;
}

#header #topright span {
        display:none;
}

Then try this for your html: <a href="#"><span>Logo</span></a>

You may need to add display:block; and set position to absolute to make it work.

For example, I use this to put a logo in my top-left corner:

#logo {
        display:block;
        width:200px;
        height:155px;
        position:absolute;
        top: 0px;
        left: 5px;
        background: transparent url('/image/logo.png') no-repeat top left;
}
#logo span {
        display:none;
}

And my HTML is <div id="logo"><span>Logo - My Site</span></div>

Mind, mine isn’t a link, but in theory putting the a href around it should work.

Thread Starter

(@justinvanheel)

Alright now this is what I did

html:

<li>
<div id="twitter">
<a href="https://twitter.com"><span><img src="images/tweet.png" /></span></a>
</div>
</li>

CSS

#header #topright {
  text-align: right;
  float: right;
  margin-top:6px;
  margin-right:-15px;
  background-image:url(images/kc.png);
  background-repeat:no-repeat;
  width:208px;
  height:80px;
}

#header #topright span {
        display:block;
		position:absolute;
}

Neither this is working when I use my HTML

<li>
<div id="twitter">
<a href="https://twitter.com"><span>my site</span></a>
</div>
</li>

Or when i leave “my site” empty
Still ain’t working man ?? Am I just dumb? :p

Moderator

(@ipstenu)

?????? Advisor and Activist

1) Is ‘twitter’ defined in your CSS anywhere?
2) Is the list inside your Header?

You may need to define li.header or something similar.

Can you perhaps paste your whole header section?

Thread Starter

(@justinvanheel)

Ok this is my header.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>"  />
<title><?php if (is_home () ) { bloginfo('name'); echo " - "; bloginfo('description');  } elseif (is_category() ) {single_cat_title(); echo " - "; bloginfo('name'); } elseif (is_single() || is_page() ) {single_post_title(); echo " - "; bloginfo('name'); } elseif (is_search() ) {bloginfo('name'); echo " search results: "; echo wp_specialchars($s); } else { wp_title('',true); }?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta name="robots" content="follow, all" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

<!-- this product is released under General Public License. Please see the attached file for details. You can also find details about the license at https://www.opensource.org/licenses/gpl-license.php -->

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
	if (!document.getElementsByTagName) return false;
	var sfEls = document.getElementById("nav").getElementsByTagName("li");

	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

</script>
<script type="text/javascript">
stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

<!--[if lt IE 8]>
<link href="<?php bloginfo('template_url'); ?>/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 7]>
<link href="<?php bloginfo('template_url'); ?>/ie6.css" rel="stylesheet" type="text/css" />
<script src="https://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

</head>

<body>
<div id="wrapper">

<div id="header">

<div id="topright">
<ul>
<a href="https://google.com"><span><img src="images/kc.png" width="208" height="80" /></span</a>
</ul>
</div>
</div> <!-- Closes header -->

And then here you go with my Topright div in the CSS

#header #topright {
  text-align: right;
  float: right;
  margin-top:6px;
  margin-right:-15px;
  background-image:url(images/kc.png);
  background-repeat:no-repeat;
  width:208px;
  height:80px;
}

#header #topright span {
        display:none;
		position:absolute;
}

And sorry I posted the wrong link ?? Hehe

Moderator

(@ipstenu)

?????? Advisor and Activist