first of all I am not the big front end developer, but I know at least normal CSS design methods. My problem is, I want one image, lets say a worldmap.
On the map I want pins and when someone hovers over that pin a info box will be shown. Thats no problem, when I use CSS circles with a hover effect and a little bit of Javascript. The problem is that the trick with the position of the circles only works, if the size of the image stays the same. When I have a responsive image, the pins are somewhere else.
Thanks!
I have been working on this issue for days and have been trying different methods that I have found in similar questions on stackoverflow and other forums to make this work but can still not figure out what is keeping me from aligning the entire object as one in adobe illustrator.
I have grouped all of the objects and the objects are merged into one layer. I click Align in the control panel. Then I make sure Align to Artboard is selected. I also click on Transform to make sure the two boxes are unchecked. Then I click Align to center horizontal, everything moves accordingly. Then when I click Align to center vertically, the logo is altered. All I am trying to do is get the entire logo centered on the artboard.
Does anyone have an idea on what step I am missing to make the entire logo move as one object?
I didn't have enough reputation to post images so I provided the image links below.
Before: http://tinypic.com/r/fxyq1h/8
After: http://tinypic.com/r/2gui1ph/8
You can see that the smile is moved up a few pixels which is driving me crazy. I can resize the objects as one. I can move the objects as one. But I can't align the objects to the center of the artboard as one.
You have to active the guideline, but it's already activated.
You should see some tutorial one Adobe TV
Is it possible to make an single image change based on where your mouse is positioned on the image?
If so, how I would I accomplish something like this?
Theres a concept of z-index which basically means that how the images are aligned in vertical space..You can stack all the imagesone above the other with only the topmost being visible..Then depending upon where the user is you can change the layering of the images on the fly.. But without any code its a bit difficult to know where are you stuck/what have you tried?
[Please only post an answer if you know the answer really well -- if you post an answer such as "I think it is easy to style it in CSS", then it is a guess and not a real answer, and it will make lots of people skip this question because it is marked as "answered"]
[I know the Share button is to be phased out, replaced by the Like button, but the program management still wants to use it as well as using the Like button]
I see fairly often that the Facebook Share button is faked by using an icon, as a background, and the text "Share" as a "button" -- the icon + text is faked to be 1 button.
Example:
http://www.youtube.com/create_detail/GoAnimate
http://www.pcmag.com/article2/0,2817,2381106,00.asp
The surprising thing is, it actually looks good on FF as well as IE 7. And the top link uses Tahoma font, while the second one uses Verdana for Windows, and "Lucida Grande" for Mac.
Question 1: what is it not made into an image? Because as we all know, an image looks the same almost every where. If you need to align the icon with the text, for all different fonts on different platform - Mac, Win 7, Win XP, Vista, Linux, IE 7, IE 8, FF, Chrome, and make the background of the text blue so that it looks like part of a button, it is going to be hard. Different fonts have different top space and bottom space (the "leading" as in printing terms), so it is hard to align the text well with the icon, and also hard to make the font not to look like grainy text on all platforms.
Question 2: is there a standard library or standard method to do it?
(the long existing <fb-share> as XFBML actually gives you an <a>, with the background icon, and then a <span> inside the <a> tag containing the text "Share". So it is actually just a square icon + text, but such as the second link above, they will fake it as a button. Maybe that's why even when it is not XFBML, some people still show the button this way instead of a good old image)
Update: also, it is hard because they usually are just <span>, and you can't specify a width for a <span>. Also, it has double borders to make it look like 3D, but it looks like 1 border is real CSS border and 1 border is by using the Sprite underneath.
Update 2: By the way, of all the Facebook Share button page that still exist on web, I never saw one with a Bubble with a count... this is getting more mysterious...
There are three good reasons for doing it this way:
Reuse: You can use the same icon on several different buttons, regardless of what the text content of the button is. This means you only have to download the icon once, which saves on bandwidth (see below) and means you don't have to make a different button image for every button you want to provide to the user. This is especially important on multilingual sites, as I'm sure you can imagine.
Bandwidth saving: The small icon used to decorate the text button is a lot smaller than an entire button graphic would be and therefore consumes less bandwidth to download it. While for one button this might not amount to much, it all adds up, especially on a site with potentially hundreds of different buttons that gets the kind of traffic that a site like Youtube or Facebook might get.
Accessibility: Image buttons take some additional work to make them accessible (the addition of an alt tag for example) which can get overlooked by web developers in a hurry. Text buttons are accessible by default because they're, well, text.
As for how to do it well, there's any number of approaches. You could use the <button> tag, though this has its own set of issues in IE, you could use <input type="button" /> and give it a background and padding (so the text doesn't overwrite the background) but that approach will require javascript to make the button actually do anything, <input type="submit" /> (similar to buttons but handling them is done server side instead of with javascript), or you could style <a> tags to look like buttons by giving them a background, white top and left border, black bottom and right border, etc. I'm sure there's others as well that I can't remember off the top of my head.
UPDATE: The OP added an update regarding spans and width. By default, no, you can't give a span a width. If you give it padding you can create space inside for adding the icon as a background image, of course, but if you need to explicitly give a span a width you can do it by setting its cisplay CSS property to block or inline-block (the latter requires a modern browser to work)
In my website I have an image as the navigation bar and have created hotspots to link them to different pages. The problem is since the text is a part of the image, I cannot change the style of the text on hover. Whereas I want the text/the hotspot to stand out on mouseover, so I learn the background color could be changed on mouse over. Is that possible? Is there a way to do that in CSS, using the area or maps. If Javascript is to be used, could someone help me out with it.
Is there a reason you've used a single image as the nav bar?
Instead of a single image with hotspots, I'd use an individual image for each navigation link. That way you can easily change the image (or use CSS image positioning) on hover. This is described here:
http://css-tricks.com/video-screencasts/7-three-state-menu/
along with many other places I'm sure.
I don't think it's a good idea to use neither image maps nor individual images.
Instead, use CSS sprites: a single image file, add that as a background image to the menu links, but position the background images differently. See this Line 25 tutorial for more information.