Multiple CSS image rollovers on a page

Hi there,
So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there a way to change the image and name of the existing button?
Here is my CSS and HTML for the existing image rollover:
/** Declaration for the a.singleRollover selector **/
a.singleRollover {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    text-indent: 0px;
    font-size: 0px;
    line-height: 0px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
/** Declaration for the additional states of the a.singleRollover selector **/
a:hover.singleRollover {
    background-position: 0 -90px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
<div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
Thanks in advance for any help.

Go here -
http://www.alistapart.com/articles/sprites
http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
Read about how to use a single image for all of your menu 'rollovers'. It works great!

Similar Messages

How do you print multiple different images on a single page in preview

How do you print multiple different images on a single page in preview?

Chances are no one who saw your question knew the answer.
Unless you're willing to share the answer you found here, then anyone else like you searching for the problem who comes across this thread will also be unable to thank you for providing the answer too.

After moving to Lion, I can no longer print multiple different images on a single page as before when I select "copies per page". Is there any way to regain that ability?

In systems prior to "lion" when I wanted to select and print multiple different imagews per page, I could select the number I desired in "copies per page". Now when I select a number in "Copies per page", I get that number of a single image instead of 1 of each each different image. Is there a way around this?
Thanks,
Tom

Chances are no one who saw your question knew the answer.
Unless you're willing to share the answer you found here, then anyone else like you searching for the problem who comes across this thread will also be unable to thank you for providing the answer too.

New CSS Rollovers not align same as Image Rollovers - Dreamweaver CC

I have put together a test page replacing Javascript Image Rollovers for CSS Image Rollovers and the alignment of items in the 3 columns (DIVS) is not the same as when old style rollovers. I cannot seem to find the error in my CSS and would like another pair of eyes to see if I'm missing something. Here is the screenshot of new page from Firefox, followed by the CSS. Images are loading into #sidebar1 (left column), #sidebar2 (right column) and #MainContent. #MainContent seems off centered and #sidebar outside margins are different. Any help would be greatly appreciated.
CSS:
<style type="text/css">

</style>

The text isn't centered within the containers for two reasons.
1. Their display is set to block and
2. There is nothing telling them to be centered
One way to fix it would be to change the <a> tags to inline-block and add text-align:center to their parents and everything should center nicely within the columns.

Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database

How do I show multiple rollover images on a page inserted dynamically (pulled out of a sql database table) using Dreamweaver’s Repeat Region. Example: I have different products each one associated (through their productID) with two images (one that’s showing in the page and one for the rollover effect) that are pulled from a database using Dreamweaver’s Recordset. So I want to end up with a page containing row after row of images(one for every product).When moused over each image will reveal the second (rollover) image for the same product which in turn can be a link(the image itself ) that when clicked leads to a detailed page with more information about the product the image is associated with. To show row after row with images for the different products in the database table I am using Dreamweaver’s Insert Rollover Image command and then the Repeat Region – I have no problem to complete the steps, to insert the image and the rollover one at once and set the paths so they are pulled dynamically depending on the productID they are associated with .I have also no problem to apply the Repeat Region so not only the first image associated with the first product in the table is shown but all of them-a routine and standard procedure when using the Repeat Region to dynamically generate and display multiple rows of data. However, when I preview the page the rollover effect is lost –the images are shown but when moused over the second image does not show. The problem is caused when the Repeat Region is applied-once again I am allowed to apply it but the rollover stops working, a kind of interference. ANY SOLLUTION PLEASE, ANY WORK AROUND.

I gotta tell you, using multiple images for rollover effects is going to be a big challenge in your dynamic scenario.
If this were my product page, I would use thumbnails with a bit of CSS opacity or filters to desaturate and make them full opacity/color on mouse over. Nice effect with much less bandwidth. Easily done globally with CSS code.
Two examples:
http://alt-web.com/GALLERY/GalleryTest.php
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
Nancy O.

In Acrobat XI, how can I select and move multiple text/image blocks simultaneously on the same page?

I work with student-generated PDFs that require all content to be within a specific margin range. Occasionally tables and figures are indented or otherwise spaced incorrectly so that the content violates the margin requirements. In Acrobat X, I could use the select tool to draw a select box around all of the text and lines within a table, for example, and just slide the entire table over a bit to meet the requirements without sending the PDF back to the author for a correction. This didn't always work, but often enough that I was able to use it on a daily basis.
Is there a way to select multiple (but not ALL) text blocks and image pieces on a page, so they may be moved simultaneously? If I have to select every text block and line (or every point and line within a graph) and move them each individually, this is going to be a nightmare.
I have Acrobat XI for both Mac and Windows, but tend to use the Windows version more often.

Hey, I'm using Acrobat XI and I can't multi select like I use too do with shift as always. Now I get a green note every time I want to multi select with shift + click as always. I also use Pitstop and I get the same green notes.
Can someone help me ?

PrepareRender() called multiple times if I have HTML/Images on a JSF page

I have extended ADFPhaseListener and also FacesPageLifecycle. I am overriding the prepareRender() method in the CustomFacesPageLifecycle.
When I insert an image on to the page in the branding facet or add any html using verbatim tag, the prepareRender() method is called two times. I am not sure why?
If I remove the images/html, the method is only executed once.
If I have image/html in the page, another strange thing is that the first time all the custom lines of code gets executed in prepareRender() method. But the second time only first few lines of code in the prepareRender() method. This seems to me a very wierd behaviour.
Any inputs from ADF product dev team?
Thanks
- Amit Kochar

Hi,
if you add the following print statement
System.out.println("rendering "+FacesContext.getCurrentInstance().getViewRoot().getViewId());
Then the output in my case is
07/04/24 08:14:04 rendering /BrowsePage.jsp
07/04/24 08:14:05 rendering /otn_logo_small.gif
The image comes from the file system, which means it is rendered by the JSF lifecycle. If you reference the image with a URL then the lifecycle doesn't render the image but only refrences it.
To avoid your prepare render code to be executed multiple times, just check for jsp and jspx file extensions, which will guarantee that your code only executes for JSF pages, not for loaded files.
The reason why this happens is because the JSF filter is set to /faces , which means all files that are loaded through that path
Frank

Multiple images associated with a page.

I want some pages to have multiple images associated with them. Currently, you can insert one image per page using the page properties. What if you want to have multiple images associated with a page? For example, you might want to have a large image, small image, a logo image, and an icon (all different images not just different sizes). I was thinking of overriding the page propties and adding those images to the dialog. Any thoughts?

Awstewar1,
Actually, the only use to image associated with page properties that I know is to use it on carousels. I realy don't see a need to do what you want, because you can get this "multi-render" effect directly from DAM. If you double click your asset on DAM, on the right side of the page there is multi-size samples, and you can even change this, and you can even use this multi-sized images, referencing the direct path that DAM generates to you.
Maybe if you tell us your needs, we can think about another solutions (:
Regards.

Migrating Content from a Custom ASP Page to a SharePoint Page Layout. Includes object tags to flash CSS images

Hi Guys,
I'm currently getting issues when trying to migrate content from ASP Pages used in a custom intranet developed by a client to SharePoint Pages.
My current strategy to do so is as per below:
a. Create ASPX Pages in Page Library with SharePoint Designer
b. Copy all common resource files needed by the pages within the Pages library. Includes folders for Javascript, CSS, images etc. This way relative address of resources in pages will pick up pages library as default folder
for resources.
c. Copy Source Code of Page from Browser by right-clicking ‘View Page Source’/ Copy code from .asp file
d. Clean the code to remove unnecessary codes from SharePoint Pages.
At this point page renders without SharePoint Branding.
However if I apply SharePoint Master Page onto the ASPX page by using Style > Attach > Default Master Page, this generates an Error when the page renders.
What is missing in this approach or what would be the best approach to migrate the page to SharePoint without code solution?
Grateful if you could help.
Thanks
Rhyan.

Hi Rhyan,
As I understand, you want to create a custom application page in SharePoint 2013.
If you copy the code in the asp page to aspx page, it cannot work. You should write the new code that can work in the asp file for the SharePoint aspx page.
There is a similar case:
https://social.technet.microsoft.com/forums/sharepoint/en-US/0a97820a-59b9-4430-a98c-d2941803c38e/classic-asp-pages-to-sharepoint-pages-migration
You can create a web application page in the visual studio. You also can explicitly change which master page is used by the application page by setting the MasterPageFile attribute of the application Page element. (For example: MasterPageFile="~/_layouts/applicationv4.master").
The articles below are about creating application Pages for SharePoint.
https://msdn.microsoft.com/en-us/library/ee231581.aspx
http://nikpatel.net/2012/01/20/custom-sharepoint-pages-site-pages-vs-application-pages/
Best regards,
Sara Fan
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Having trouble saving an image of the whole page using pdf it. I click save, but not in the file. I have tried saving in multiple locations, saing it as .jpg

Just about 2 days ago I started having a problem saving a jpg file using the "pdf it!" add-on. It lets me save, but when I look in the folder there is nothing there? I use save as image and then whole page. I have tried saving in several different locations, but nothing works.
Thanks for the help.

The link to website of the developer is broken too !

Horizontal menu with horizontal sub menu using image rollovers or similar

Hello,
I am brand new to web design and working on my first site. What I lack in skills, I have in free time to learn right now : ) Please let me know if there is a tutorial or other resource that describes what I am trying to do...I've been searching for days and just can't find what I'm after.
The design concept is a menu of main categories that apear to be floating over an object. When you hover over one, it looks like it gets pressed down in space resulting in the next line populating with subcategories to be selected. If you click on the main elements, you would be directed to that page - Services for instance. If you just hovered over a main category, you would be presented with a list of sub-categories that behave in the same fashion. If you then clicked on one of the sub-categories, you would be taken to that specific page.
Here's a sequence of images that show what I'm after.
I built all this in Illustrator as described in a Lynda.com tutorial. I then exported slices to dreamweaver and started building content. Each of the categories and sub categories is a separate slice with images built for the rollovers. I was able to build the main categories and get them to visually sink upon using an imageswap...now I'm stuck on how to get the second line to behave as I described.
This is a fun learning experience. Let me know if there is a better way to achieve the design. I just stared investigating SSIs as well and see the value in having this menu in just one place, referenced into all my subsequent pages. I have successfully embeded an SSI footer with rollovers on my page, but this menu problem is really tough for me.
I really appreciate any pointers.
Thanks,
Jeff Prince

I tried building a Spry Horizontal menu to get what I want, but I had no success there. Any tips for that?
On a separate note...I do not know if it is proper to use a 'tabbed panel' for my menu project, but it seems to work fine. I have built both the top (main category) and bottom (sub category) lines of my menu using spry with .png image rollovers.
Now I just need to find out how to make the main category button rollover stay 'down' while browsing the subcategories. I would also like to get the subcategories to populate upon mouseover of the main category, without requiring a selection. Now that would be slick : ) In my example above, the 'services' title should be depressed while in that submenu and look like 'landscape design'.
One minor problem is the space created between my subcategory images. I can't find the .css or .js that is creating that space. I've really trimmed down all the .css and do not know where else to hunt.
Thanks for any advice,
Jeff

MULTIPLE place image import...& "save as.." multiple layers to multipage PDF

Hello,
just some suggestions I`d like to see to speed up my set up and output..
i`d like to import multiple placed images into illustrator CS4. So open dialogue box place, and multiple select images for placing.
regards output save as...
Can we output multiple layers into a single PDF in illustrator? Or multiple layers into single JPEGS from illustrator with one command instead of individually saving out each layer... would be a huge time saver for me.I create different artworks on different layers..
Currently I output each completed layer individually and then right click those outputted jpegs in their output folder and choose "combine supported files into acrobat..." to make a single acrobat file..i`d like to do this right in the illustrator "save for PDF" dialogue box. Adding something in the Save for PDF output dialogue box to save layers to one PDF as multiple pages would be a helpful time saver..
I`d also like to be able to CTRL click multiple layers and go " save as..." only those layers get saved out...

, bridge -FILE/PLACE into ai, goes to separate layers in AI as placed.
in PS, bridge/tools/ps/load files into ps layers.. CS4.
just using right click in explorer on individual PDF docs from layers saved from PS to combine to PDF. but cannot output multiple pds from layers in AI in CS4.

How do I crop multiple separate images from one photo

I need am trying to crop multiple pictures from a scanned yearbook. I would like to save the people's pictures individually. How do I crop and save multiple images from one scanned page?

DUplicate the photo and crop the duplicates
LN

SCRIPT TO IMPORT MULTIPLE PLACED IMAGES..AND OUTPUT MULTIPLE IMAGES TO SINGLE PDF.

Anyone got a script to import multiple placed images into CS4? or is this possible in CS5?
and can we output multiple layers into a single PDF in illustrator? Or multiple layers into single JPEGS from illustrator with one command instead of individually saving out each page... would be a huge time saver for me.
Currently I output each completed layer individually and then right click those outputted jpegs in their output folder and choose "combine supported files into acrobat..." to make a single acrobat file..
I`d also like to be able to CTRL click multiple layers and go save as... only those layers get saved out...
And so adding something in the Save for PDF output dialogue box to save layers to multiple pages would be a helpful time saver..

In CS 4 and CS 5 you can drag and drop fro m the finder or the Bridge, and I guess any other similar type viewer, multiple number of image files to a document. You can configure the bridge in such a way as to allow you to see the Bridge and your document at the same time for this very purpose.
If you just drag and drop the files are linked if you drag while holding the shift key then the files will be embedded.
ID and PS CS 5 have a minibridge which works the sam way but is an actually panel and will stay in the front.
I separate the images but they import one on top of another.

Multiple CSS image rollovers on a page

Similar Messages

Maybe you are looking for