I am new to Fireworks CS4 and keen to learn to use it right but I am having difficulty understanding the whole slicing and exporting mechanism, so that I can also use in Dreamweaver CS4.
What I have is a header banner image where I also have the name of the site to the left of this header banner.
On this same header image, I want to place two buttons (with rollover effects if possible), to the top right area of the header image, with links to another URL.
Now the things that I am unsure how to do are based on the above description are:
1) How can I make the name of the site section only, to the left of the banner as a link to a url when the user hovers over the name part only, the mouse hand turns into a pointer and gets redirected to url
2) The same goes for the two buttons that I have created as two individual symbols?
3) How can I slice the above two queries, so that I can export into Dreamweaver, so that all the required code comes across with all the desired effects, that is, when previewing in Firefox, all hovering on site name and two buttons work as required?
I am unsure how to slice it? Do I have to assign hotspots to the sections? I am unsure how to export it.
There is a slice layer in Fireworks. It is always the top layer. It lets you draw shapes over parts of your graphic, which show up in translucent green. When you click on one, you have the option of adding a URL and other parameters of a link. At that point, you have the option of exporting as sliced images, an HTML page, etc. If exported as HTML, the images will be contained in anchor tags with the URLs you gave them. Or you can just export the slices and assign the links in Dreamweaver.
Related
I'm making externally hosted CSS files for use by other people. I want to be able to create a small logo in the bottom left corner that links back to my page. Is this possible using just CSS? I cannot use HTML for the image/link because people can and will remove my credit.
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
I could not find the clear difference between IMAGE MAPS and CSS SPRITES. Both are looking like combining the images in the page into one? So we can reduce multiple requests to the server. So what is the real difference?
Image Map:
A single image in a page, with different areas you can click on, which then have different effects (eg launching different links).
There's a description of this here: http://www.javascriptkit.com/howto/imagemap.shtml
CSS Sprites:
Combining the images behind a number of css classes into a single file to improve performance - eg reducing number of requests and often overall download size.
For example you might combine various border elements of a colorbox dialog into a single image, or combine the clicked and unclicked images for a button.
The best description I've found of CSS sprites is this one: http://css-tricks.com/css-sprites/
An image map is one image that you can turn into an image map and place multiple links on top of the image.
A CSS sprite is one image made up of mutiple images that youy use CSS background positioning to display this reducing http requests.
An Image Map is the definition of coordinates that are lying over the image to be able to react to events on this areas.
a css sprite are two or more images joint in one image.
I know it been asked a year ago, just let me try to explain in own my words.
CSS Sprite is like a single file image repository that you can pull out any portion of it via css and place them individually in arbitrary area in your webpage real estate, while image map (to-url) , as it name suggest is a image that has a clickable area that maps to your target url.
I need to add a scroll to "one" picture and load it asynchronously.. with the help of scroll bar...
The picture is bigger than the div area so need to scroll. I can use "overflow: scroll " but it loads the whole picture whereas my requirement is to load the picture as a user moves the scrollbar.
thanks
The would help to load a page with multiple large images in the manner you are describing
Lazy Load plugin
It isn't built for one giant sized image which is what you want. However it should be an easy matter to slice you image into reason sized regions or tiles and use this loader.
Out of interest really - here is a utility that will automatically slice up images to protect them from theft. I occurs to me that you could combine the two if you didn't fancy manually splitting the image - or just wanted to be a bit of a coding hero. In any case the link shows that sliced and recombined images look perfectly fine. Users can't tell if it's done right.
i want to know about sprite technology used in css regarding fast accessing of the web pages.
They are cool because you can minimize http requests with them and make your page's performance improve. They are considered good in terms of SEO as well. Check out this for more info:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This page gives a pretty good overview.
Essentially it puts all of the page's images into one large image file and then uses CSS to display only parts of that file (to give the effect of multiple images). This has the advantage of only requiring the browser to make one request for all the images rather than a bunch of individual requests (each of which has an overhead).
If you have the group of icons for example , you are creating one jpg or png file and adding the images one after another. Then you just creating the backgrounds based on only one image and fixing it in percentage / pixels view. It makes your code organized and saves images loading time . For example , you have a window and it has close , unfold icon. You can create a png file named windowControlSprite.png that contains two icons one after another , then you can create properties in your css to this element. #somediv {background-position:0px -20px;}
Also, you can find CSS sprite X and Y easily with tools like http://www.getspritexy.com/
Otherwise you need to use image editors like Photoshop or use Firebug to find X and Y coordinates.