How JustAnswer Works:

  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.

Ask ATLPROG Your Own Question

ATLPROG
ATLPROG, Computer Software Engineer
Category: Programming
Satisfied Customers: 7677
Experience:  MS in IT.Several years of programming experience in Java C++ C C# Python VB Javascript HTML
44910485
Type Your Programming Question Here...
ATLPROG is online now
A new question is answered every 9 seconds

WEBSITE DEVELOPMENT TECH HELP: I am developing a responsive

Customer Question

WEBSITE DEVELOPMENT TECH HELP:
I am developing a responsive scrolling web page. My landing spot is a full-sized graphic with several hotspots in the graphic that I want to function as hover/swap image out buttons with 3 states: inactive, hover, and click. I can't figure out how to do this image swap with images that will keep the whole thing still responsive and true to scale and am looking for someone to walk me through the code.
Submitted: 1 year ago.
Category: Programming
Expert:  Steve replied 1 year ago.

Hi, my name is ***** ***** I think I can help you with your responsive images problem if I correctly understand what you're trying to do. Are you there to chat now?

Customer: replied 1 year ago.
Hi - I'm here now.
Expert:  Steve replied 1 year ago.

Hey there. Can I take a look at the site to see what you're describing?

Customer: replied 1 year ago.
It's not live yet. Can I send you a zip of the page graphic? I am able to create a responsive site with the large graphic and it shrinks as it should. But I need to create hover button slices on certain areas of the image and I can't get them to scale along with the main graphic. If it's OK, I'll send you the graphic first and then I'll look for a page.
Expert:  Steve replied 1 year ago.

OK. Have you created multiple sizes of the graphic or are you wanting the browser to do all the sizing for you?

Customer: replied 1 year ago.
I'm having the browser do the sizing.
Expert:  Steve replied 1 year ago.

OK. Do you know how to send a file to me?

Customer: replied 1 year ago.
I'll upload it in just a moment, thanks.
Expert:  Steve replied 1 year ago.

I'll need the graphic and your current code.

Expert:  Steve replied 1 year ago.

I can run that on my Web server to see what's happening

Customer: replied 1 year ago.
Is there a file limit? My zip of the layers didn't upload. You can see ONE of the page efforts at http://sh-eye-n.com/staging/landingswap.html
Expert:  Steve replied 1 year ago.

Can you put the file on the site and give me a link to it and I can get it that way?

Customer: replied 1 year ago.
The .psd is 40 meg
Customer: replied 1 year ago.
It's 200dpi and I am downsizing it. Hang on and I'll ftp it up.
Expert:  Steve replied 1 year ago.

But you're not rendering the .psd on your site, right?

Customer: replied 1 year ago.
No, but the file on the site is a .jpg or a .png. I'm uploading the file, but it's slow. Please bear with me.
Expert:  Steve replied 1 year ago.

OK, while it uploads, can we chat about exactly what you're trying to accomplish now that I've looked at it live?

Customer: replied 1 year ago.
I have to say that I'm hacking here and out of my league. I always used Fireworks to make swap images with javascript. I've never done a responsive before and I can't get everything I want with what I've been able to find out. Can you see the main image on the page?
Expert:  Steve replied 1 year ago.

Yes

Customer: replied 1 year ago.
You will see that there is a red button on the upper left and several buttons at the bottom. Client wants a hover state and a click state on the buttons, where the button graphic changes to a pressed or highlighted look. I can achieve this with javascript swap images, but if I do that fireworks generates an HTML insert with slices that aren't compatible with responsive resizing.
Customer: replied 1 year ago.
are you able to retrieve the file here? www.sh-eye-n.com/staging/images/LandingPage_LAYERS (2).zip
Customer: replied 1 year ago.
sorry - this is the whole linkkkkkkk [www.sh-eye-n.com/staging/images/LandingPage_LAYERS (2).zip]
Expert:  Steve replied 1 year ago.

OK, hold on one second

Customer: replied 1 year ago.
OK. Ideally what I want is a hotspot for each button, but that won't work because the maps don't translate with the resizing.
Customer: replied 1 year ago.
neither do the swap images. Sorry, I'm glad to hold on. Just trying to give you further details.
Expert:  Steve replied 1 year ago.

OK thanks, I'm looking at it.

Customer: replied 1 year ago.
OK
Customer: replied 1 year ago.
The sprite hack was just something I picked up in desperation, but it clearly doesn't do the job. Sorry to put you through it!
Expert:  Steve replied 1 year ago.

Are you open to creating multiple sizes of each image and varying which image yoiu display based on the viewport?

Expert:  Steve replied 1 year ago.

That would give you control over what you are displaying and where it displays, which will help you pinpoint the right hotspot.

Customer: replied 1 year ago.
I was trying to avoid that. If someone were to click and drag the window smaller, the transition would be very choppy, wouldn't it?
Expert:  Steve replied 1 year ago.

It might be, but I honestly don't see a way you can accomplish what you're trying to do if the browser is going to do the image manipulation for you, because you won't know what size it is or where it is on the screen.

Customer: replied 1 year ago.
How many multiple sizes would be called for, and how would I refer to them? There are 7 buttons, so 3 states for each would result in 21 buttons x how many sizes of each image?
Expert:  Steve replied 1 year ago.

Three sizes, small, medium and large

Customer: replied 1 year ago.
63 button images plus 3 landing graphic images?
Customer: replied 1 year ago.
how would that affect the responsive scrolling page code I've already got working?
Expert:  Steve replied 1 year ago.

Yes, sorry I know it sounds like a lot, but you need to have control over the image for hotspots.

The other option might be to split your image into pieces so you can create hyperlinks instead of hotspots.

Customer: replied 1 year ago.
I think that's the way I did it with the javascript image swap, but it puts spacers between the slices that don't work if someone drags the window size.
Customer: replied 1 year ago.
would the 3 sizes allow for a complete fill of the page with the image? Client is insistent on this.
Expert:  Steve replied 1 year ago.

You would have to replace the image rendering on the page you have now to something like:

@media only screen and (min-device-width: 500px) and (max-device-width:1024px) {

background-image: url(http:/// medium.jpg)

... etc ...

@media only screen and (max-device-width: 489px) {

background-image url(http:// small.jpg)

... etc..

Customer: replied 1 year ago.
OK, I'm lost. Are there specific maximum device width parameters for each of the 3 size sets?
Expert:  Steve replied 1 year ago.

Yes, targeting a desktop, tablet and phone essentially

Expert:  Steve replied 1 year ago.

That's how you provide a different image to the device, based on it's display capabilities.

Customer: replied 1 year ago.
what size do I have to make my button swap outs? And what am I using to swap out the images.
Customer: replied 1 year ago.
make 3 different maps, then? Using a total graphic of what size?
Expert:  Steve replied 1 year ago.

I'm not sure about the button sizes. You have to create the three background images first, and then size the buttons for the two smaller images.

You should be able to swap the images with CSS based on max-device-width

Expert:  Steve replied 1 year ago.

Eventually, the <picture> element is supposed to solve this problem, but it's not supported in browsers yet, it's just a spec.

Customer: replied 1 year ago.
this:@media only screen and (max-device-width: 489px) {
background-image url(http:// small.jpg)
goes in the CSS, right?
Expert:  Steve replied 1 year ago.

Yes

Customer: replied 1 year ago.
Do I have to set a parameter for the large, or is it the default?
Expert:  Steve replied 1 year ago.

It is the default

Customer: replied 1 year ago.
OK. So I make an image map for each of the 3 sizes? on hover, make the foreground image invisible just where the image spot is? or how does that work.
Customer: replied 1 year ago.
do I still use the stretch parameter to fill the viewing window?
Expert:  Steve replied 1 year ago.

@media only screen and (min-device-width: 500px) and (max-device-width: 1024px) {
span[id=switchthis] {display:block;
background-image: url(http://www.example.com/tablet.jpg) !important;
background-repeat: no-repeat !important;
width: 300px !important;
height: 250px !important; }
img[id=back] {display: none !important; }
}

You might need an absolute position because of the hotspots

Expert:  Steve replied 1 year ago.

You can't stretch the image and do hotspots

Expert:  Steve replied 1 year ago.

You have to know which image is displayed and exactly where it's displayed on the screen toi use the map generated by Fireworks

Customer: replied 1 year ago.
THAT is the answer I've been trying to find since day one.So what width does the default image have to be?
Customer: replied 1 year ago.
Will this still be considered as a responsive website?
Expert:  Steve replied 1 year ago.

While we've been chatting, I looked at some tools online that might help you. Take a look at:

http://www.inabrains.com/tooltip/image-hotspot-creator.html

Expert:  Steve replied 1 year ago.

It's a jQuery solution that uses tool tips for the hotspots. I hadn't thought about that approach.

Customer: replied 1 year ago.
far, so good! Does jQuery work on all conventional browsers?
Expert:  Steve replied 1 year ago.

This is something that I think you should use a plugin or other third-party solution for rather than coding it yourself.

Expert:  Steve replied 1 year ago.

Yes, the browser only needs to support JavaScript

Expert:  Steve replied 1 year ago.

I bet 80 percent of all websites use jQuery

Customer: replied 1 year ago.
while you may not have had any experience with this particular tool, do you think it would support image swaps? A lot of the css ones I have seen only change styles and colors, not images.
Customer: replied 1 year ago.
Believe me, I would much rather use a plugin than trying to code it myself!!!
Expert:  Steve replied 1 year ago.

I believe it uses tooltips for the hotspots. So you might have to be creative or compromise a little in how the hotspots appear. But until browsers support this kind of thing, you're limited in what you can do.

Customer: replied 1 year ago.
Sorry, just visiting some of the previous questions (I know I'm throwing a lot at you)So what width does the default image have to be?
Expert:  Steve replied 1 year ago.

You can just leave it at the default maximum size you were going to use

Expert:  Steve replied 1 year ago.

I think you only need the two CSS styles for the smaller images.

Customer: replied 1 year ago.
The current image that the client subitted is much too large to fit on my browser page without spilling over.
Customer: replied 1 year ago.
how do I call the image swap? Or are you saying I can't do that with this tool.
Expert:  Steve replied 1 year ago.

OK, then you'll just have to choose a size based on what you think visitors will use on a desktop. Sorry, there's not a better answer.

Customer: replied 1 year ago.
Is there a conventional width? 1024? I have no idea, which is why the stretch function was nice.
Expert:  Steve replied 1 year ago.

You need to look further into that tool to see what it provides. But it says it's "The First Fully Responsive ToolTip Bundle with 12 Positions, Customizable Color Presets Menu Templates, Image Maps, Hotspots, Videos and Triggers"

Expert:  Steve replied 1 year ago.

I'd say 1024

Customer: replied 1 year ago.
OK. I will spend the rest of the afternoon playing with the tool. Are you available for follow-up after I try the suggestions if I hit any snags?
Expert:  Steve replied 1 year ago.

It uses LiteToolTip.js, a jQuery plugin

Expert:  Steve replied 1 year ago.

Yes, just put my name at the front of a question so I know it's for me.

Customer: replied 1 year ago.
Does today's fee cover that?
Expert:  Steve replied 1 year ago.

I don't think it covers the follow-up. I think you need to create a new question.

Customer: replied 1 year ago.
All right, then. Is it OK if I wait to rate you until I have some resolution on this issue?
Expert:  Steve replied 1 year ago.

Sure thing, whenever you're ready. But please rate me because I don't get paid anything if you don't.

Customer: replied 1 year ago.
I'll make sure you get paid. Thanks for your time.
Expert:  Steve replied 1 year ago.

You're welcome. I'll poke around a little more at other solutions, too.

Customer: replied 1 year ago.
Is there a way that I can get a copy of this transcript?
Expert:  Steve replied 1 year ago.

Copy/paste is probably the best way

Customer: replied 1 year ago.
Thank you! I appreciate it.
Expert:  Steve replied 1 year ago.

You're welcome, good luck with the site!

Expert:  Steve replied 1 year ago.

Hi there. I was just checking back with you to see how everything turned out and if you need any more assistance?

Customer: replied 1 year ago.
Hi, Steve. I haven't forgotten you. I was up till the morning hours trying to get something that would do what I need and I'm still stuck. I tried the tooltips thing and that isn't remotely what I need. It doesn't provide for image swaps to show the animation. I was hoping as you said you would do some digging that you might have come across an alternative?Also, I'm still not clear on exactly how the @media works. Does this direct the browser which image to pick up? How do I call it in the HTML markup? I would have my but what do I name? The large graphic?
Expert:  Steve replied 1 year ago.

Hi Dena, sorry that didn't work out. I did look around for some other tools that might help.

Stacks4Stacks says it provides for responsive graphic with hotpots. It says the hot spots can be text or a simple background fill. I'm not sure if a background fill is too much of a compromise for you, but I haven't found something that will enable you to do exactly what you're trying to do.

The CSS I provided will swap images based on the size of the view. It's nothing fancy or special, it's just regular CSS that you would use to swap one image for another.

if you want, I can opt out of this question and see if there's anyone else who can help you.

Customer: replied 1 year ago.
Stacks are a utility for Rapidweaver, a Mac software package. I use PC and they can't cross over. While I appreciate all of the time you have taken with me, I think it would be best if you opt out of the question. If no one can solve this issue, you have my word that I will pay you for your trouble. I will reopen the ticket with you so that you can be compensated. Thanks.