Solved

CSS loop through hotspots

Posted on 2013-06-12
13
485 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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)

914 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

17 Experts available now in Live!

Get 1:1 Help Now