javascript - Programatically Scrolling Over Images in a Website -

-

I am attempting to set up a website using HTML and Javascript which, at one time, sections of an image Displays and clicks, buttons or segment of the image will scroll to a different section of the image.

| ----- | | ----- | | ----- |
-A- | | --B- | | --C- |
----- | | ----- | | ----- |

If an image formed by a combination of A, B and C, I want to display only one segment, AB or C at a time, and to display one by clicking on a button Scroll left or right so if B appears, and if I click on a button inside the B, then I want to scroll the browser to the right and display the display.

I think I can do this by creating three images next to each other, it is quite far enough that one will not see each other, and use javascript to hide scroll buttons, And then to use javascript, scroll to the html anchor that specifies the location of the image.

However, I am having trouble getting images off screen if my small plan is to work, then I have to put an off screen on the left side, and I will have to offset the C to the right. How can i do this Can I do it via HTML? Do I have a better way of getting that functionality?

Thank you!

It may be possible that using pure HTML + CSS anchors but another strong method Some javascript is injected from inside. I think that you are trying to make some visually attractive so that some animation may not hurt.

You do not need to close the images from the screen. By setting overflow to hidden , a div will be fine, just create a deviation that is equal to one of your segments, so that you can justify the margins of the internal image is required. If you know jQuery, it can help:

CSS 

  div {width: 300px; Heigath: 500px; Hidden flurry; #images div contains an image in which the image A, B, and C.  
  
  HTML    & lt; Div id = "picture" & gt; & Lt; Img src = "abc.jpg" width = "900" height = "500" /> & Lt; / Div & gt;  
 
  jQuery  
 
  $ ('div # images img'). Click (function () {var marginLeft = parseInt ($ (this). CSS ('margin-left'); var new margin left = margin left-300; if (new margin left = gt; = $ (this) $ (W): {new margin left:}, $ 500); Return back;});  
 
 Hope it helps, note that you  is not  to keep them all in one image, this is the only way to do this . You can have inner divisions and images different, and you can animate that internal device. It is up to you.

Comments

Post a Comment

Popular posts from this blog

c# - How to capture HTTP packet with SharpPcap -

-
I would like to capture all incoming HTTP packets on my machine. To do this, I am using SharpPcap which is a WinPcap The cover is. SharpPcap works very well, but it captures TCP packets and what it wants to do for me is a very low level. Does anyone know how can I easily get full HTTP requests / reactions from all these TCP packets? Thanks SharpPcap is already able to capture the packet in the same way That's what the virus does (just in the code instead of the GUI). And you can either either parse them directly or you can put them in the drive in the common .pcap file format. The steps to parse the capture are: Open a connection at any time Loop a while Or start capturing using an event callback Parsing the raw packet for the type you want If you are reading .PPP dump files In addition to calling you an offline capture reader is almost the same, there is no need to select an interface, and you can set the majority There is no need to do the modes. All st...
Read more

php - Multiple Select with Explode: only returns the word "Array" -

-
By using Wordpress I have created a multiple selection box so that users can select categories to exclude. When the page is initially loaded, I see my predefined default option. However, when I select a new value and I save ... I only see the word "Array" and have not chosen anything else? & lt; Class = "amultiple" id = "& lt; php echo $ value ['id'] ;? gt;" name = "& gt; php echo $ value ['id'] ;; gt; []" Multiple = "multiple" size = "8" & gt; & Lt ;? Php global option; Foreign currency ($ value as value $) {if (get_settings ($ value ['id']) === FALSE {$$ value ['id'] = $ value ['std']; } And {$$ value ['id'] = get_settings ($ value ['id']); }} $ Ranges = & amp; Amp; Categories ('type = post & orderbiz = name & amp; hide_empty = 1'); If ($ ranges) {$ ex_cat = implode (',', $ tt_cat_exclude); Forex Currency ($ range a...
Read more

php - jQuery AJAX Post not working -

-
I do not understand why this script does not work. It has something to do within AJAX PostScript / Function. Right now, when I submit my form, it runs php code on the same page. What it should do, send the values ​​of the form for Project_Azax.fp, then there will be a refund of success on the page which is correct or false. $ (document) .ready (function () {$ ('div # didIt'). Hide (); $ ('form [name = adminForm]'). Submit (function () ($ {'.post' ('/ project_ajax.php', {action: $ ('[name = action]') Val (), pId: $ ('[name = pId]'). Val (), name ('[Name = name]'. Val (), url: $ ('[url = url]'). Val (), summary: ('[summary = summary]'). Val ()}, Function (data) {if (data.success) {$ ('div # didIt') .Sliddown ('slow');} and {warning ('unsuccessful SA!');}}, 'Jason'); return false ;});}); What is the code for project_ajax.php below ... if ($ _ POST ['action'] == ...
Read more