Solved

CSS loop through hotspots

Posted on 2013-06-12
13
487 Views
Last Modified: 2013-11-19
I've been writing C# winforms program for years but I know very little about html and nothing about CSS. Now I find I need some help.

I'll need complete html/css source from top to bottom please.

I'm building part of a web page from within my winforms program at run time.

I should not need an Internet connection for this to work.

I'll have an array of x1,y1,x2,y2 coordinates for hot-spots on an image.

I need to set all these hot-spots in relation to an image that can be moved around. So, the hot-spots need to be in relation to the image's top/left corner.

I'll need to have some sort of a relationship so when the user clicks on a hot-spot I can take some action just for that one hot-spot.

Is CSS the best for this? I know some people do not allow JavaScript to run on their browsers.

I'm hoping someone very knowledgeable about HTML and CSS can write something for looping through just a few hot-spots for me in a few minutes (at least I hope so).

If this cannot be done in a loop then please just an example of a few hot-spots.

Thank you. Very much appreciated.
0
Comment
Question by:NDennisV
  • 6
  • 5
13 Comments
 
LVL 4

Assisted Solution

by:BAKADY
BAKADY earned 500 total points
ID: 39243074
you are right... some people do not allow JavaScript to run on their browsers... but not all browsers understand modern CSS - mean CSS3 -.

here a little and simple example how CSS3 can handel animations and
"nach oben" mean "to top" - make the page scrolls - works with javascript
http://www.ludoki.com/

for the hot-spot/image you can use a image map in html.

if the image should be moved around, i have to asked how??? if the user interact with it and drag it away?? than javascript. or like animation or fixed window position? than can work with css too.
0
 

Author Comment

by:NDennisV
ID: 39243124
Thank you. No, the user cannot drag the image around but it can be moved up or down at design time.

I'll look up "html image map."
0
 
LVL 4

Assisted Solution

by:BAKADY
BAKADY earned 500 total points
ID: 39243131
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Accepted Solution

by:
NDennisV earned 0 total points
ID: 39243155
I found this site: http://www.image-maps.com/ which gives me html and css.

I don't want any obsolete code or code that will become obsolete in a few years.

Am I correct in assuming CSS is better than HTML?
0
 
LVL 4

Expert Comment

by:BAKADY
ID: 39243175
Am I correct in assuming CSS is better than HTML?
you're wrong, they are different things and they need each other...

HTML suppose to be your content and CSS your style, css define how your content will be displayed -
0
 

Author Comment

by:NDennisV
ID: 39243717
Sorry, I meant for the hot-spot loops. Not overall.
0
 
LVL 4

Expert Comment

by:BAKADY
ID: 39243789
i can help you with html and css, but i am not a java programer (i realized jet what hotspot mean, or you mean something else)...
regards
0
 

Author Comment

by:NDennisV
ID: 39244204
Using that site I mentioned above I've managed to get something working.

Thanks anyway.
0
 

Author Comment

by:NDennisV
ID: 39244739
I've requested that this question be closed as follows:

Accepted answer: 0 points for NDennisV's comment #a39244204

for the following reason:

Found it elsewhere.
0
 
LVL 4

Expert Comment

by:BAKADY
ID: 39244740
Please look at followed posts
http://www.experts-exchange.com/Internet/Web_Development/Q_28155872.html#a39243074
for the hot-spot/image you can use a image map in html.

http://www.experts-exchange.com/Internet/Web_Development/Q_28155872.html#a39243155
I found this site: http://www.image-maps.com/ which gives me html and css.

http://www.experts-exchange.com/Internet/Web_Development/Q_28155872.html#a39244204
Using that site I mentioned above I've managed to get something working.

As Expert a gave you a correct advice, thanks this you found a website which generate the code you need. I cann't know all sites in internet!!!

http://www.w3schools.com/ isn't old at old, it is a learning-plattform, there aren't final solutions just examples

NDennisV please reconsider your decision

Regards
0
 
LVL 4

Expert Comment

by:BAKADY
ID: 39245413
(C) Question answered by one or more Expert comments

*why*
by the answer http:#a39243074 to the NDennisV's questions below
I'll have an array of x1,y1,x2,y2 coordinates for hot-spots on an image.

I need to set all these hot-spots in relation to an image that can be moved around. So, the hot-spots need to be in relation to the image's top/left corner.
i recomended the auth to use html image maps http:#a39243074 and i post a link to w3school http:#a39243131 for more information about and HTML references
He confirms that in his post http:#a39243155, he found a website that generate apropiate image map's html and css code.

Regards
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question