Solved

Image links arranged properly with roll-over images

Posted on 2014-02-17
8
267 Views
Last Modified: 2014-02-18
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
Comment
Question by:garryshape
  • 3
  • 3
  • 2
8 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39866324
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
 

Author Comment

by:garryshape
ID: 39866359
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39866384
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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39866654
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
 

Author Comment

by:garryshape
ID: 39867511
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
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39867551
I wouldn't worry about sprites unless you plan on getting huge amounts of traffic.  Transparent png will work.
0
 

Author Closing Comment

by:garryshape
ID: 39867563
thanks so much, hard since my last web design practice was 1999 - 2002
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39868018
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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
innerHTML 7 35
jQuery Dialog Autoresize Bug 2 25
2 separate CSS animations 2 17
message Alert on an empty search 10 23
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question