How to create a grid style homepage for website? - grid

can anyone tell me how to do like a grid layout homepage please?[how to code it or where to find this information.
the squares should respond/change colour or image when the mouse hovers over to show they can be clicked. i'd like to be able to have different sized and shaped squares too.
cheers
pic related
enter image description here

You can use boostrap ui components
E.g.
http://www.bootply.com/70929

Related

Google App Maker - Clickable Image Map

I am attempting to create an apartment complex app for my company.
I want to add an image of the overall floorplan for the apartment complex (I added the image to my app).
Now I'd like to add one of the following:
• custom shaped buttons that line up with each Unit in the complex
or
• Setup a clickable image map on the layout image
I humbly thank you in advance for helping me figure this out!
You can try to split your big image into several small images and made different images clickable.
Or you can put big image on fixed layout, and put buttons on fixed positions something like this
blue circles with icons are buttons.

Lightbox with Flex

I want a fusion chart in my flex app to display with a Lightbox effect like the effect you get when you click on any of the charts here or checkout the demos here
These effect have been attained with the help of javascript. How do i get the same effect via Flex? Any idea?
Thanks a lot
I built a Flex component called PopUpThumbnail that is very similar to HTML/JavaScript lightbox components.
Here's an example application that I created with it to displays Flickr images.
Add a mask over the top of the whole application with the content area in the middle and the semi alpha area around it. Clicking on the surrounding mask removes the layer, and you can interact with the content area as normal (make it look like a popup rather than actually using one...)

Change background of image maps on mouse hover

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.

To build a flex volume control component similar to that of Youtube

Hey, I've been assigned to design a flex 3 volume control component similar to the one Youtube players have. I mean, you move the mouse over the volume icon and a vertical slider appears.
My only doubt is about how making this vertical slider to appear and to hide properly.
Should I extend a PopUpButton somehow? Maybe another kind of PopUp component? Or do I really need to program the whole thing in actionscript(that would be just sad and sounds like reinventing the wheel)?
Is anyone able to simply point me in the right direction?
OBS: No need to teach me about skinning, designing.. or any of the rest. :)
No! Don't use a popup. Put a canvas somewhere hidden behind your bar of controls and just set it's visible to true when you mouse over the control.
I don't remember if the youtube slider covers the volume button or appears above it, but either way you can put it in there with a canvas.
If you want it to be one single component, the problem you run in to is that the size will be wrong if you hide the slider in the button component (It will be measured to be the size of the slider, instead of the button). But don't worry! Just override measure() and measure the button instead of both. Then if you set clipContent to false, it can display the slider outside of its bounds
What I suggest is to create a flex control that contains a graphic for displaying the volume meter and a hidden slider.
When you roll over the graphic volume meter you show the slider.
When you roll out the slider or the volume meter then you hide the slider.
I believe that's all

Image map in Flex

Anyone have an example of doing something like an image map in Flex? I'm not sure if that is the correct term, since I also want to do things like highlight the selected part of the image or show a popup bubble pointing to it. Any ideas?
Check this out: flexlib > ImageMap

Resources