Solved

CSS loop through hotspots

Posted on 2013-06-12
13
484 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
 

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now