Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS loop through hotspots

Posted on 2013-06-12
13
Medium Priority
?
497 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
13 Comments
 
LVL 4

Assisted Solution

by:BAKADY
BAKADY earned 2000 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 2000 total points
ID: 39243131
0
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 

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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

704 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