• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 282
  • Last Modified:

Image links arranged properly with roll-over images

So I drew up an idea in PowerPoint of what I want to have in a webpage... this is part of a small internal knowledgebase I'm trying to create.

http://i.imgur.com/f2szUqF.png

I'm trying to figure out the best way and method to take what I have in the screen, and make each image/text a link that goes to another page or loads another page for that category, and also make roll-over images for each text/image link.

So "Keyboard", including the image of a keyboard, would be a hyperlink (a square box) that would load a roll-over image when I hovevered the mouse over it, and when I clicked, it'd load to another page that's dedicated to KB articles about the keyboard.

The only way I'm familiar with is through Photoshop and slicing and tables.

As there a better recommendation here?

I can load websites into Apache or IIS for this.

dell_hardware
app-choices
0
garryshape
Asked:
garryshape
  • 3
  • 3
  • 2
4 Solutions
 
Chris StanyonCommented:
Slicing photshop images and using tables went out of fashion a decade ago :)

The common way of doing rollover images these days is to use sprites. A sprite is basically one image file that contains both states of your 'button' - the normal state and the rollover state. You then use CSS to style your link so that under normal conditions you see one part of the image, and then on hover, you show the other part.

A simple (untested) example might look like this:

<a href="keyboards.html" id="keyboards">Keyboards</a>

#keyboards {
   display: block;
   width: 150px;
   height: 150px;
   background: url(keyboardSprite.jpg) no-repeat left top;
}

#keyboards:hover {
   background-position: left -150px;
}

Open in new window

Your background image (keyboardSprite.jpg) would be an image that is 150px wide and 300px deep, containing your 2 button states - the normal in the top 150px and the hover in the bottom 150px;

There are other ways to do it, but this is the common way. Google CSS sprites for a more detailed explanation and examples.
0
 
garryshapeAuthor Commented:
Cool thanks, looks interesting.

What about arranging into rows/columns? Would I go for a table?
Rather than having image links floating around the page
0
 
Chris StanyonCommented:
Maybe :)

There's no definitive right or wrong answer here, but using tables for layout is considered bad-practice these days. If your data is tabular in nature, such as rows and columns of information, then tables are probably right, but in your example there are better ways of doing it, but if you've only ever worked with tables for layout, they can take a while to get your head around.

For a list of links like you're after you could float them or display them as inline-blocks. Here's one example.

//HTML
<a class="button" id="keyboards" href="keyboards.html">Keyboards</a>
<a class="button" id="mice" href="mice.html">Mice</a>
<a class="button" id="monitors" href="monitors.html">Monitors</a>
<a class="button" id="printers" href="printers.html">Printers</a>

//CSS
a.button {
   display:inline-block;
   width: 150px;
   height: 150px; 
   background-position: left top;
   background-repeat: no-repeat;
   margin: 5px;
}

a.button:hover {
   background-position: left -150px;
}

a.button#keyboards { background-image: url('keyboards.jpg'); }
a.button#mice { background-image: url('mice.jpg'); }
a.button#monitors { background-image: url('monitors.jpg'); }
a.button#printers { background-image: url('printers.jpg'); }

Open in new window

There're a few ways of doing it depending on what you need.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Scott Fell, EE MVEDeveloperCommented:
Another good alternative is to use a what is called a grid.  A css grid simply divides the page up into a number of columns (typically 12 or 24) by floating a block (div) to the left and giving it some margin.  You could do this on your own simply by
<style>
.row{width:800px;}
.col{width:200px;float:left;}
</style>
<div class="row">
    <div class="col">stuff</div> 
    <div class="col">stuff</div>
    <div class="col">stuff</div>
    <div class="col">stuff</div>
</div>

Open in new window

That is over simplified but works. I use frameworks for this from both bootstrap http://getbootstrap.com/css/ and foundation http://foundation.zurb.com/.  I tend to use bootstrap more because more people use it meaning more compatibility.  These are both responsive grids meaning you can program your page to look good for both desktop and mobile just by assigning classes. The heart of these things is a responsive grid http://getbootstrap.com/css/#grid
<div class="row">
  <div class="col-xs-12 col-md-8">full width top mobile, main desktop</div>
  <div class="col-xs-12 col-md-4">full width bottom mobile, left side desktop</div>
</div>

Open in new window

There are some examples http://getbootstrap.com/getting-started/#examples and one that may be interesting for you http://getbootstrap.com/examples/justified-nav/. If you look through the links on zurb (foundation), there is  a lot of good info on responsive.  

This may be info overload and creating a responsive page takes more thought then a traditional fixed page because you need to think about what the page will look like on 2 to 4 different sizes.  I do think it is worth the effort to embrace this because more and more people are using "mobile" and really tablets.  I just read there are something like 1000 different screen resolutions in use today when you take into consideration many of those are devices that can go landscape or portrait.
0
 
garryshapeAuthor Commented:
Thanks so much

Now just a quick follow-up question, as it pertains to the graphics I'll be using...

Pictures of the keyboard, mouse, etc....

You know the white space around the images? Is the best way to get rid of that to make a transparent background around the image to use photoshop? Or is that done in the process of creating Sprites in a program like Fireworks?
Just don't want the white space/background surrounding the image to mess with the placement of image or roll-over effects..
And would jpg or png be best for the file format?
0
 
Scott Fell, EE MVEDeveloperCommented:
I wouldn't worry about sprites unless you plan on getting huge amounts of traffic.  Transparent png will work.
0
 
garryshapeAuthor Commented:
thanks so much, hard since my last web design practice was 1999 - 2002
0
 
Chris StanyonCommented:
Sprites are still the best way to do roll-over images and if you want a transparent background then you'll have to use PNG - JPGs don't have transparency - You can do the whole lot in photoshop - no need for fireworks..
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now