Solved

Image links arranged properly with roll-over images

Posted on 2014-02-17
8
257 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 42

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 42

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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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 42

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now