www.webdeveloper.com
Results 1 to 9 of 9

Thread: Problem passing parameter through URL to next page in Internet Explorer 8......

  1. #1
    Join Date
    Jun 2014
    Posts
    5

    Unhappy Problem passing parameter through URL to next page in Internet Explorer 8......

    Hello. I am wondering if there's any expert here to help me on this?

    I have a form consisting of few button images, added with mouseover and mouseout events. I have no problems with these events. My problem is when I click on the image, the VALUE and NAME parameters are not passed through URL in IE. It works fine in Chrome and other browsers. Why the parameters are not captured in the URL in IE? I have tried using <input type="hidden"> and it works fine but it passes all VALUE and NAME parameters (A, B and C). I want it to be either (A, B or C). Any ideas to solve this prob?

    Here is the sample code
    <form action="abc.html" method="GET" >

    <div style="display: inline">
    <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('A','','images/crop_a_lock.jpg',1)">
    <input type="image" src="images/crop_a.jpg" width="108" height="98" id="A" name="Aname" value="Avalue"/></a>
    </div>

    <div style="display: inline">
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('B','','images/crop_b_lock.jpg',1)">
    <input type="image" src="images/crop_b.jpg" width="108" height="98" id="B" name="Bname" value="Bvalue"/></a>
    </div>

    <div style="display: inline">
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('C','','images/crop_c_lock.jpg',1)"><input type="image" src="images/crop_c.jpg" width="109" height="98" id="C" name="Cname" value="Cvalue" /></a>
    </div>
    </form>

    URL (chrome)
    abc.html?VoucherA.x=33&VoucherA.y=54&Aname=Avalue ( this is what I want)

    URL (IE 8)
    abc.html?VoucherI.x=86&VoucherI.y=62

    please help?

  2. #2
    Join Date
    May 2014
    Posts
    909
    Are you sure this should even be a FORM? Or images in the markup? Or separated by DIV for no reason? OR using that stupid malfing mm_swap nonsense that the steaming pile of manure known as Dreamweaver still dupes people just starting out into using?

    Much less an anchor AROUND an input? Dimes to dollars IE is obeying the anchor, NOT the input.

    I have the feeling the snippet isn't telling me enough about what's going on, but I would suggest either making the anchors be actual anchors filled with text and a image replacement method, or get rid of the anchors and build the form properly with the PROPER tags that go into a form like LABEL and FIELDSET.

    I'd probably have to see the images in use to suggest much more than that, but Question:

    If you get rid of the "Anchors for nothing" and the scripttardery, does it work?
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jun 2014
    Posts
    5
    Hi deathshadow,

    I have tried removing the anchors but still cant pass on the parameters.

    <form action="abc.html" method="GET" >

    <input type="image" src="images/crop_a.jpg" width="108" height="98" id="A" name="Aname" value="Avalue"/>
    <input type="image" src="images/crop_b.jpg" width="108" height="98" id="B" name="Bname" value="Bvalue"/>
    <input type="image" src="images/crop_c.jpg" width="109" height="98" id="C" name="Cname" value="Cvalue" />

    </form>

    clickimages.jpg

    URL (chrome)
    abc.html?VoucherA.x=33&VoucherA.y=54&Aname=Avalue ( this is what I want)

    URL (IE 8)
    abc.html?VoucherI.x=86&VoucherI.y=62

  4. #4
    Join Date
    May 2014
    Posts
    909
    Actually -- wait, are you saying you only want one of them -- the one clicked on to return a value? If so, wouldn't it make more sense for them all to have the same name?

    I'd suggest possibly using the BUTTON tag -- IE7/earlier have trouble styling (or more importantly removing styling) from it, but an extra outer span could be used as a overflow container to chop off what we don't want... an inner SPAN could then be used for CSS sprites, a FAR more effective way of doing your hover states if combined with Gilder-levin image replacement...

    ... and I probably just confused the bugger out of you. Lemme put it this way:

    Code:
    <form action="test.html" method="get">
    	<fieldset class="hoverInputImage">
    		<span>
    			<button type="submit" class="aValue" name="testValue" value="Avalue">
    				Avalue
    				<span></span>
    			</button>
    		</span><span>
    			<button type="submit" class="bValue" name="testValue" value="Bvalue">
    				Bvalue
    				<span></span>
    			</button>
    		</span><span>
    			<button type="submit" class="cValue" name="testValue" value="Bvalue">
    				Cvalue
    				<span></span>
    			</button>
    		</span>
    	</fieldset>
    </form>
    All in a fieldset since they are a set of selections, outer span as a overflow/style container, text to say what the values are when images are blocked/unavailable, inner span for gilder-levin image replacement and CSS sprites. Gilder-levin is a method where you absolute position an empty element like a span over the contents (text) of another element for an images-on appearance. Images off what's underneath shows through allowing you graceful degradation when people block/disable images, or things that don't see images like screen readers, braille readers and search engines.

    The CSS for that would go something like this: (assumes a 'reset' is in use)
    Code:
    .hoverInputImage span {
    	float:left;
    	overflow:hidden;
    	position:relative;
    }
    
    .hoverInputImage span,
    .hoverInputImage button {
    	float:left;
    	width:108px;
    	height:98px;
    	cursor: pointer;
    	cursor: hand;
    }
    
    .hoverInputImage button {
    	border:0;
    	padding:0;
    	margin:0;
    	font:normal 18px/98px arial,helvetica,sans-serif;
    	text-align:center;
    }
    
    .hoverInputImage span span {
    	position:absolute;
    	top:0;
    	left:0;
    	height:196px;
    	background:url(images/hovers.png) 0 0 no-repeat;
    }
    
    .hoverInputImage button:active span,
    .hoverInputImage button:focus span,
    .hoverInputImage button:hover span {
    	top:-98px;
    }
    
    .hoverInputImage .bValue span {
    	background-position:-108px 0;
    }
    
    .hoverInputImage .cValue span {
    	background-position:-216px 0;
    }
    Notice it only needs one image to function. I put a working example of this on my server here for you:
    http://www.cutcodedown.com/for_other...uzzz/test.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/curiouzzz

    Is wide open for easy access to the gooey bits.

    Again, because it uses CSS sprites, sliding the background and the element inside an overflow around, it only needs one image:
    http://www.cutcodedown.com/for_other...ges/hovers.png

    To function. For the hover we make the inner span twice the desired height, which gets chopped off by the overflow on the parent. Slide it's top position up 98px, the bottom 98px are shown. For the bValue and cValue we just slide the desired part of the background into place with background-position.

    Faster, leaner, and no javascript needed; as coded it should work all the way back to IE7. If you need IE6/earlier support you can use a behavior file like Peterned's anywhere:hover (google it) to use a tiny bit of scripting to drag legacy IE kicking and screaming into working.

    Because they all use the same name, it's only one thing to check for it's value, instead of three. Only the one you submit will actually send it's value.

    Hope this helps. Was kind-of guessing on what you were trying to accomplish.
    Last edited by deathshadow; 06-15-2014 at 08:59 PM.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Jun 2014
    Posts
    5
    Woah! Thanks a lot my friend! You are the best....
    Appreciate it very much....

    thanks thanks....

  6. #6
    Join Date
    Jun 2014
    Posts
    5
    Hi deathshadow,

    Really appreciate your kind help.

    The one you provide is applicable to 1 image and then setting up coordinates. My problem is I want to shuffle the images as well so the images can't be in 1 file. They need to be separated. Help Help

  7. #7
    Join Date
    May 2014
    Posts
    909
    can you define 'shuffle the images'? Would swapping the classes on the BUTTON get the job done? Or are there more possible combinations than the six you had?
    Java is to JavaScript as Ham is to Hamburger.

  8. #8
    Join Date
    Jun 2014
    Posts
    5
    Hi deathshadow.

    For example :
    Orginal page : Image A, Image B, Image C
    Refresh page : Image B, Image C, Image A (shuffled - no specific order).

    I can't shuffle the images if everything is in 1 piece of image. Any advice would be really appreciated.

  9. #9
    Join Date
    May 2014
    Posts
    909
    Yes you can - switch out that markup thus:

    Code:
    <form action="test.html" method="get">
    	<fieldset class="hoverInputImage">
    		<span>
    			<button type="submit" class="cValue" name="testValue" value="Cvalue">
    				Cvalue
    				<span></span>
    			</button>
    		</span><span>
    			<button type="submit" class="aValue" name="testValue" value="Avalue">
    				Avalue
    				<span></span>
    			</button>
    		</span><span>
    			<button type="submit" class="bValue" name="testValue" value="Bvalue">
    				Bvalue
    				<span></span>
    			</button>
    		</span>
    	</fieldset>
    </form>
    You switch where the class is, it slides to a different image! That's the power of CSS sprites; just as we can slide to show the hover states, we can slide the background to show whatever ones you want!

    See this:
    Code:
    .hoverInputImage .bValue span {
    	background-position:-108px 0;
    }
    
    .hoverInputImage .cValue span {
    	background-position:-216px 0;
    }
    The background is slid around based on the parent element's class. (.aValue uses the 0:0 on the default span's properties) -- As such you change what class is where they appear in a different order. How they appear in the image file has NOTHING to do with their on-screen appearance.
    Last edited by deathshadow; 06-17-2014 at 04:51 AM.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles