I'm currently doing a project which is an interative website for a "company". My idea was to use an image of the company room, where they work and use it as the background for the website. The problem is that i wanna do it like a point and click game, where i move my mouse and as soon as I step into something it will pop up information about that something. For example, a written board at the bottom right side of the picture talks about a meeting they are doing, so as soon as my mouse goes over that board it would pop up something talking about that meeting. My difficulty is that i don't know how to "split" the image into those small things (the board, the 3 desks, the posters on the wall...).
The idea is to use an html base and use JavaScript auxiliated by jQuery.
Any help would be appreciated :)
PS: can't post the image because I still don't have 10 reputation.
This link has pretty much example what you want. You can use css :hover on the areas to detect when the mouse moves over them.
Hope that helps!
Related
This is a question that comes up quite frequently when I'm building sites. I've never come up with a solution but I thought maybe some smart SO contributer might be able to work it out so here goes:
Say I have a large full page background image with background-size:cover. I want a specific part of the image to have a hover state e.g. Say it's a large picture of a car driving on a mountain. If you hover over the car I want it to be replaced with a glowing car.
One way I could do this is to use javascript to replace the whole background image for the same image of the mountain scene but with a glowing car. But obviously this requires an additional large image download. (As in this example).
What would be better would be for me to have another div that covers the car and just assign a new background to the inner div which is perfectly lined up to the parent image.
This is straightforward to do in an unresponsive way (see this example) but I can't think of a way to do it with a responsive background-size:cover image.
It feels like there might be a solution, possibly using object-fit or something. But nothing springs to mind. Here's a responsive version of the pen (which doesn't work but demonstrates my desired set up).
Can anyone think of a way of acheiving this? What other techniques could work here?
Thanks
I'm trying to create this Icon Animate effect for my personal work. As they are using images to draw icon on hover. Any other trick to use this one. Please advise
Live Working Link
http://puu.sh/pAksc/8c81c44718.png
Man... I think you don't understand at all what you are talking about ...
Here are some things you should try and understand first.
First, have you tried any piece of code or looked for a tutorial ?! Usually if you post a question on Stackoverflow, you're not asking people to do your job, you must first have tried things and have a code example to show...
Start here : https://css-tricks.com/svg-line-animation-works/ This should do what you want to do.
Then you just have to trigger the animation on div:hover
Second this won't work with a png. This only work with specific SVG images. First take a look at what an SVG image is and how to work with it in HTML/CSS.
Third you don't need any jQuery here so leave that aside if that's the only thing that requires jquery in your website.
I am working on a project where people can edit their mobile cover and will be able to print there own image with preview here is the example url
zezzle.com
I have no idea how is it working, need help
Thanks
As an architect before I enter the web programming field..
I can tell you that somethings sometimes need to optical illusions .. the picture is not bent .
I think of my work during the short period in the programming field to tell you that can not bend the image ..
Short idea .. is to put the picture down of mobile cover image and give some opacity and effects to the place which will appear the image in .. you will got what I trying to say in this example
SEE That Hope it will help
I have a table set up on a website I use it to display 9 images with descriptions. I want to be able to click on an image and have it be displayed larger like in a gallery but i would like to not have it change the layout of the page.
I am just starting to work on this web page so almost any way to do this will be helpful.
Lightbox is a pretty commonly used one, but I'd suggest you try and build your own. It's not a terribly difficult thing to program and it will help you grow as a programmer.
I am trying to update my start-up company's website' homepage, but my knowledge in programming is limited to HTML, CSS, a little bit of jQuery, and I am trying to understand HTML5 (I can also read~ish Javascript, but it's not often a great success...)!
Therefore i am coming to you for a solution.
Here's the following (picture enclosed) :
The logo is here, no need to touch that ;)
what i need is for the smallbox.png (with some "CAR" written on it) to get a glow when hovered on with the mouse (i got the smallbox_glow.png)
then move to the middle of the page (1) when clicked on (still same image, with car written on it)
then automatically fade the text away, expand into the big box (2) and get some different text (..about cars) to fade in.
Is this impossible to do, or 2 lines or code will make it work? I am kind of stuck here...
I am willing (and interested!) to learn different coding languages, so shoot away with the complexity if necessary =)
Image :
here : http://i.imgur.com/0IWzQ.png
Thanks in advance!
I agree with Anthony 100%...here are some pointers to get you started.
Per your use case
what i need is for the smallbox.png (with some "CAR" written on it) to get a glow when hovered on with the mouse (i got the smallbox_glow.png)
then move to the middle of the page (1) when clicked on (still same image, with car written on it)
then automatically fade the text away, expand into the big box (2) and get some different text (..about cars) to fade in.
Some food for thought:
This can be done via CSS alone using background-images for anchors and change via a:hover and/or a:active, etc. If it is plain text that you are displaying, consider using "text-shadow" for your glow effects and modernizer.js for cross-platform compatibility.
This can be done using HTML canvas or jQuery's animate api.
jQuery offers various fade effects
As we are all new at some point, don't be shy to post what you have as we can better assist with any questions.
Best of luck.