Can I use a sprite in a callout?

General Discussions
1

Hi all,

my first post, and my site is still in the throes of development - please be gentle. :slight_smile:

I have set my home page up using sprites for circular images. It looks like I have to use individual images for the callout option, which I would prefer, but therefor increasing my HTTP requests. Any options on that?

Right now, only my text is linked, but not my images. I am sure there is a way to link the image sprites, but the callout looks so much more refined (IMO)

My url is http://venture.photo/

Thanks a lot in advance. :slight_smile:

Hugh

2

Hey Hugh,

Thanks for getting in touch and welcome to the BB forums! I’m afraid using sprites for our Callout module is not possible. I would suggest wrapping the div button-icon with another anchor tag having the same link as the text. Better yet, wrap both divs under one anchor tag. Either should work fine and should be easy enough to do since you’re using a Text editor module. :slight_smile:

Ben

3

Hi Ben,

thanks for the reply.

Well, I tried linking the image only, as well as the image and the text, but to no avail. What is confusing me is when I tried adding a link, if I hit the save button and then went immediately back into the editor, it had stripped out my changes. Any Idea why that would happen?

The first example below is what I wrote - the second is what was left after I saved it. Does it strip out incorrect code?

Confused. :slight_smile:

Hugh

<div class="button-icon seniors"><a href="http://venture.photo/senior-pictures/"></a></div>
<div>
<h2 style="text-align: center;"><a href="http://venture.photo/senior-pictures/">Seniors</a></h2>
</div>

<div class=“button-icon seniors”></div>
<div>
<h2 style=“text-align: center;”>Seniors</h2>
</div>

4

Hey Hugh,

Right, anchor tags only work with inline styled elements which a div isn’t. Using span would do but then we have a blank anchored element, which can’t be done as well. You can use our HTML module and hard code everything. This works just fine on our HTML module.

<a href="http://venture.photo/senior-pictures/">
  <div class="button-icon seniors">
  </div>
  <div>
    <h2 style="text-align: center;">
      Seniors
    </h2>
  </div>
</a>

Ben

5

Perfect Ben. Thank you so much for the speedy response. Awesome!

Hugh

6

No worries! Enjoy The Beaver! :slight_smile:

Ben