Is there any way that by clicking parts of an image file, as the first screen of the application, you would get a drop down menu or a redirect people to a different menu/page of the application. The image file would be easy to zoom in to and people can look around the image file. When they click on a certain part of the image (text), they could be redirected to another page in the app, or a drop-down menu or info list. Any help would be appreciated. I am trying to stick to Buzztouch and non-coding methods, but I do know very basic HTML so I can place codes in to my Xcode project. Thanks

Hi, This can easily be accomplished by creating an image map...essentially cut up the image into different sections, and make each one a hyperlink to another page. This would like one HTML file to another HTML file, and would not link different screens...meaning, everything would stay in the same screen that the original HTML file was loaded into. Does that make sense? I think there is a way to link to different screens from within an HTML file, but I'm not aware of the exact method. Multiple people have asked that question on the forum, and I don't know if an answer has ever been provided. Do a search and see what comes up! Does this help at all? Mark

This does help massively. Just knowing that it can be done is one massive leap forward. I can see where you method is coming from, and I can understand it, just I might need a little help on how to do this. If you don't mind, can you explain how?

Hi, There are multiple ways to do it, of course! One way is to have an single image divided into various geometries, and have each section ascribed to a link. Here is a good example of how that works: http://www.javascriptkit.com/howto/imagemap.shtml The other way is to slice up the image into multiple images, and piece them together via HTML. Then each image becomes a clickable link to an HTML document, in the same fashion that any image link would work. Can you provide a screenshot of the image you want to map? Mark

I forgot to mention that this would be a map. It's a map of my area, made in the London Underground style. Most of the map will be empty space and only area's around the text will be able to click on. There will be at the most, twelve places to make links. I haven't actually made it yet though, but I can show you what it should look like and what it'll do.

You can follow this link, http://www.afn.org/~alplatt/tubemap.gif This is the style of map I am willing to create and each one of the 'stations', you will be able to find out more about it. Fortunately, I only have to have 12 (max.) stations on my map making it a hell of a lot more simpler. Do you see what I'm trying to do?

Mark, excellent advice, hope to use tomorrow. My two bits is to use a map screen. Fred Check out w2school & sitepoint for html help.

When I said I knew a bit of HTML coding, I mean't pretty much nothing. I haven't tried much coding so if it involves coding, you'll need to help me out. Sorry if you go it the wrong way

Also, would I be able to use Buzztouch for this?

I agree with Fred...an image map is the best way to go here. If you follow the tutorial at the link I indicated, it should set you on the right road. This can work within Buzztouch, assuming that you want to go from HTML page to HTML page. If you want it to load a new screen, or a menu list, or something like that, then it becomes significantly more difficult. But, if it's just one HTML file to another, then it's pretty easy. A little study online, and you should be up and running in no time! Mark

This is great knowledge to know. You're great people to have around. As I've said loads of times: all I want is to create a link from one part of the image file. This will redirect them to another page in the app. I hope this is what you're trying to say. Thanks greatly for sharing your valuable knowledge. This will really help me. Best Regards, Annandale Applications

Yep, that's exactly what I'm saying! Here are the general steps: * Create a base HTML page (map.html, for example) that has the image you want to map. * Create an image map on that page, using the example from the link (you can Google creating an image map...lots of examples out there, and some sites that do it for you!) * Create HTML pages that contain the data for the various links you create in the image map. For example...maybe a marble_arch.html page that contains information for that stop, and which will get displayed when the user clicks on that station from the map. * Repeat the above steps for all the stations you want! Feel free to contact me at MrkFleming at gmail dot com if you need more help, or post here and we can continue the discussion for the benefit of everyone! Mark

I do kind of get where you are coming from. I think the next step for me would be to complete the map. This will take me a few days (if not, before). Then I can follow your steps because it'll be easier to understand when I can see it myself. I am still shaky on this but yhat's probably because I can't see it myself. I am trying to imagine it. If I continue to need your help, which is very useful, then I keep posting on this forum thread so others can benefit from our discussion as well.

Sounds good! I'll keep my eye out for updates to this thread. Don't hesitate to post when you get stuck. Mark

It might not be for a few days yet until I start my app development. But for the meantime, should I just design the app like a normal buzztouch app? You know, add tabs and stuff like that. Should I create the info pages on which the map will redirect to?

Yep...I'd add everything your comfortable adding up to this point! Mark

Ok. That's great to hear. I'll maybe be a bit longer (a week, maybe) as I will need to make the designs so when I come back, we just discuss how to stitch it all up. Thomas Boyd - Annandale Applications

Ah, the London Underground map, a thing of beauty! I'll send you some html with image map links in it later this week if you nudge this back and haven't managed to figure it out. Good luck.

Here is a quick example of what it will look like. I linked a map of London Underground and added three points that will link to other HTML docs. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Untitled Document</title> </head> <body> <img src=LU1.jpeg alt=Underground Map width=269 height=188 border=0 usemap=#Map /> <map name=Map id=Map> <area shape=circle coords=128,37,2 href=area1.html /> <area shape=circle coords=147,110,1 href=area2.html /> <area shape=circle coords=92,86,2 href=area3.html /></map> </body> </html>

Well please do bear in mind that my Map will just be in the style of the London Underground. It will be a completely different design and only have a maximum of 12 stops. And When I said I knew a tiny bit of coding, you guys must of got it a bit wrong. A tiny bit, to me, means pretty much nothing. Just enough really to play around with codes to see what happens after they have been put together

I'll do it for you if need be, next time you learn though, cool? Cool. I can knock up the single page in Dreamweaver pretty quick, you'll have to do other pages.

I'll try to do it myself. I've also got Dreamweaver. If I do it myself, then I can learn. If I get really stuck to the point where I just can't do it, then I'll give you the file. but I would really like to know how to do it for myself. Because I will try and aim to do more applications like this. It's just because it's the first, and I need to know.

Remember, it'll be at least a week until I get it made.

Good man! Piece of cake in Dreaweaver mate, you'll get it done.

Ahh...I absolutely LOVE the collaborative effort between Buzztouch forums users! Awesome stuff!

Thanks Mark! That link gave me good information. I could really learn from that site. That is exactly what I wanted.

Something that fogot to ask you, MacApple, is that would it be a lot easier to. Air my app on Dreamweaver. All I know about it is how to create nets and grids. But none of this, I can do in coding. I would have to be in the design tab, not coding. So my question is, would it be easier to use Dreamweaver and copy and paste the codes into Xcode than to use Buzztouch on what I'm trying to do?

Tossing in a wrench - for fun. Lots of cool examples of how to do this type of thing without HTML and instead with the Button screen. Try to follow along... a) Make a background image with your 'highlighted' hot spots. Things to click on. This is one plain-jane image you mocked up in photoshop. It LOOKS LIKE a bunch of clickable hot spots with callouts, text, graphics, whatever. The user just kinda gets it that things on this image are clickable. In the case of a map, users will for sure click on text labels and shapes. b) Set this as the background on a button menu. In the advanced settings of the menu, set no scroll so nothing moves. c) Next, imagine an invisible grid over the top of the image. Each square in the grid holds a button. All of the buttons are transparent .PNG images. The same image in fact. No icon, no text label, just a transparent image. So far so good, tons of hidden buttons over the background. d) Next, figure out the optimal size for the squares in the grid. 10 x 10, 50 x 50? It's up to you and the best size will be determined by the underlying image and it's fake hotspots. e) Set the images / buttons to load 'nothing' when tapped on the squares that don't have an underlying hot spot. Set the images / buttons that overlap a hotspot on the underlying image to load the proper screen. It's likely that many of the buttons will load the same screen, like the adjacent buttons that all overlap the magic text or whatever. Tip: When doing design work and figuring out all the funky details, use a semi-transparent button image so you can see the underling graphic and the button at the same time. When your done, re-make the image so it's transparent. Don't make a new image with a new file name because then you'll need to modify all the image names in your control panel (each button). Just use the same image and re-save that baby as totally transparent when you're ready to go live. Oh, wait, you could also just use the transparency setting in the control panel when you're done. I think you can set it to 100 for totally visibile and 0 for invisible. Pouring here. Like major hard rain, bogus.

David, I hadn't thought of a 50x50 grid. Is there a limit?

Should not be a limit on the grid, I've done some big ones (like 100, 150, etc) and some tiny ones, like 20, 30. Experiment, the size of the square (image size) shouldn't matter.

Hi David, I'm also interested to follow this method for a more customized UI. There are two things that I don't know how to do: 1. How to make the button do nothing when clicked on it? 2. When we release the finger from the screen, the button gets a white overlay. Is there a way to override this as it is a bit strange to have a white little square light up over the area I need to click. - never mind this. I got it. I was testing on an app that had the background image cut up for each button so making a big canvas for the user to see. Clicking on a button flashes a the background color so when using the transparent buttons it should not be a problem. Thanks for any inputs. Vali

Well first, you will need to make your image map. It is called map because you will need to map out the coordinates of the buttons

I'm over this stage now, I just need to know how to make a button do nothing when clicked.

Well I'm not sure. I haven't even finished the process on making the map. You would need to ask the others and follow the link above. It is really useful

If you don't setup the button, what will it do? If you delete the screen created with the button, clicking on the button will ? Do nothing?