Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

<div> as a link?


rudolfl

Recommended Posts

Hi, all

 

This is a general HTML question. I am working on converting my site to 2.3.3.

I modified the way header is shown and I am trying to make click on the store logo to go to home page. Does not work.

 

Here is site (test site, but running off live database, so please do not create bogus accounts, etc....)

http://hatsfromoz.com.au/new_hats/catalog/index.php

 

I wanted store image to take whole header with buttons on top, so I made store logo a background image of a header <div>. How do I make it a link to home page?

 

Thanks,

Rudolf

Link to comment
Share on other sites

This is how, with a little twist:

 

In html
<div class="div_style"><a class="link_style" href="<?php echo tep_href_link(FILENAME_DEFAULT);?>"> </a></div>

In css
.div_style {
display:inline-block;
}

Style in logical ordered:

.link_style,link_style:visited {
/* This will be the clickable background to   */
background:#ececec url('images/your_image.png') 1.25em 50% no-repeat;
/* Position the image as you see fit */
}
.link_style:hover, .link_style:focus {
/* Style as you see fit, as per wacg */
}
.link_style:active {
/* Style as you see fit, as per wacg */
}

 

Have fun.

 

Sara

Link to comment
Share on other sites

Thanks,

 

1. Yes, i looked at Google before posting. Did not find solution that suits me.

 

2. Thanks, Sara. Tried your suggestion -- the problem is that only space character turns into a link. I need whole <div> to be a link.

 

I guess, the only solution is to put image in a <div> and attach <a> to that image. The problem then is placing the buttons on it, but this should be possible with absolute position, although it will be ugly

 

Rudolf

Link to comment
Share on other sites

First of all, be aware that a user clicking on this link will be exiting osC, and will lose their session (their signon and their shopping cart). If you're OK with that...

 

If I understand what you're trying to do, you have a <div> of some size, with a background image, that you want someone to be able to click anywhere in there and go to another page? I can think of two ways, at least one mentioned before:

  1. Add a Javascript "onclick" action to the <div> and change your location.
     
  2. Overlay the entire <div> with a transparent image (you only need one pixel, stretch using width="100%" height="100%") and use that as the link:

<div class=.....><a href="...."><img src="trans.gif" width="100%" height="100%" border="0" /></a></div>

 

That ought to be enough to get you started.

Link to comment
Share on other sites

With jquery:

 

$(function(){//bof doc ready function
$(".my_div_class").click(function(){
window.location = "whatever-page.php"
});
});//eof doc ready function

 

Then just make sure you add a style in your stylesheet to make the .my_div_class have a pointer cursor so people know it's a link:

 

.my_div_class{cursor:pointer;}

Matt

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...