Solved

Image links arranged properly with roll-over images

Posted on 2014-02-17
8
260 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

775 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