this is a general web design question but seeing that the site I have built for my client was built using wordpress I will ask it here first.
My client has a lodge/chalet with 2 floors. She has supplied CAD drawn floor plans of both floors and photos of all the rooms. She has asked if I could add the functionality of showing image popup's of the rooms as the mouse pointer is hovered over each separate room in the original floor plan image. I understand that somehow I would need to create zones overlaying the original image, with mouse over css rules which display the photos.
I think it is a lovely idea and hope some clever soul could point me in the right direction of achieving this.
Many thanks
I would split up the floor plan into smaller sections (squares or rectangles), put them into divs as backgrounds, then add CSS or jQuery for mouse over on the divs to popup said images.
Related
I want to realize the following. Let's imagine 6 company logos vertically placed on desktop view. When I watch the site on tablet (or shrink the browser manually), 2 company logos jump to the next line, but I want them to be centered. And not floated to left, as all grid systems do. Is it possible somehow? Especially with Bootstrap?
My theory is, if I could know which images are in the second row, I could count then the offset from left, and move the images with js to a centered position. But only, if it is needed, so if 3 images jump to the new row, it's okay, nothing to do with them. Am I right?
Didn't found any solution or plugin knowing this specific feature.
It is possible to use Javascript to do this but it would be better most of the time to do this using responsive breakpoints. So if your desktop grid classes are col-md-2 and when going to a tablet size, two jump down, it would usually be better just to make the logos col-sm-4, making 3 logos on each row.
If you notice only 2 images jump down on tablet, you could also add col-sm-6 to just the last two to potentially center those images on the next row.
I'm a CS scrub and I thought I understood everything until now. I'm being prompted to make anything I want, so I'm choosing to make a little game I've been thinking about for a few months. The problem is that I don't know where to start. We've been using JavaFX and we've done some animation but I don't fully understand everything. I don't really understand mouse events but the idea I have depends on them. Anyway, here's the idea:
The main (2D) game is about reducing fractions.
Imagine the window being split horizontally into top and bottom.
Now, imagine boxes spawning out of view and moving into view toward the horizontal center line. The boxes will only be moving vertically and each box has a random integer. When a box gets to the center, it'll stay there and allow for other boxes to land on top of it (or below it if it came from the bottom).
Boxes are eliminated by "reducing" a number in the numerator with a number in the denominator. Several boxes may be selected on one side before reducing them with the other side. Here's a picture that might help convey what I want to do:
Crude Three Frames of the Gameplay Drawn In Paint
Hopefully that all makes sense.
I've been trying to use an extension of Rectangle but I don't really know what else to do. I figure I'll need to create some ArrayLists to keep track of the boxes and some other lists to keep track of factors as well. Anyway, any help would be fantastic. Thank you guys very much!
Recently I have heard that you can create forms like a rectangle for example with css3, but i wonder why would I ever do that, doesnt it only cost more time in comparison to images?
I can only imagine that it would be better for pageload speed.
Okay now to be clear of few things... Images and CSS are two different things.
Speaking about form, if you want a rectangle, then you can just have some tags like div tag, and style them using CSS.
CSS is way faster than loading few images. If u wanna use images for designing purpose such as creating a rectangle, then its better to use CSS to get the effect.
Gone are those days when people used to use image to style up the website. CSS are ruling now. Unless its an album thing, or slider, or background image, or profile image, etc don't use image for designing purpose.
Also, with CSS along with few tags, you can create few geometrical objects like arrows, circle, rectangle, squares, etc.
Speaking about time, being a developer, you have to look at the TIME COST from clients prospective always, than developers prospective. Things can be get done in a jiffy, and unorganized manner, but comes in huge cost.
live2d can animate a picture and make small movements, just as they show in this video.
1 Does anyone know how it works?
2 Is there any paper describe the mechanism behind it? I tried google scholar search but find few.
3 Is there any open source work on this field?
The fundamental algorithm is like control points in Adobe Illustrator. Control points are like anchors for the image. You can shrink, stretch and bend the image by moving the control points.
Unfortunately, NO. Live2D is all developed in the company.
For now it is all closed project.
I need to start building a image application and my customer wants to arrange the picutes in the screen like google tv does, as well as everpix. I have been looking for it for a while but I was unable to find it. The result of arranging the pictures this way is amazing and makes the best use of the screen space.
http://www.google.com//tv/static/images/photos_tv_straight.png
Is this a known algorithm? Does it have a name?
Many thanks
T
Like jwpat7 suggested look for "photo collage layout" algorithms. Particularly things like "treemap" and similar (squarified trieemap). I am working on similar algorithm and for some small number of images you just need to solve simple system of linear equations. There is another HP article that is probably more close to what are you looking for.
Mixed-Initiative Photo Collage Authoring - look at part 4.
Following image is done with some squarified treemap and ratio optimization.
Search for photo montage and photo collage algorithms, as well as photo tiling.
An HP article called "Structured Layout for Resizable Background Art" may be helpful.
Numerous collage programs are available for purchase and some software is available in source form; e.g. see hlrnet list, software.informer list, and perhaps this resizing blurb.
The algebra for scaling photos for a collage while maintaining aspect ratios is straightforward and easily described for specific cases, but not for too-general ones.
In css you can arrange images from horizontal to vertical. A good example is the Google image search. There is the Jquery Masonry plugin to arrange from vertical to horizontal and it has some nice animation. In your example you want to have rather a rectangle arrangement I suggest a treemap algorithm where you can also rotate the rectangle in 90°.