News:

Wondering if this will always be free?  See why free is better.

Main Menu

Make a preview image appear from drop down

Started by hcfwesker, September 16, 2012, 10:25:01 PM

Previous topic - Next topic

hcfwesker

I have this set to where the selected image is shown after the drop down is selected and settings are saved.  But would like for the preview image to show as well wheil members are selecting their options.  The images are labeled 1-37 , depending on the character selected.  works like it should.  but just ant to get it to where a preview image shows as well.


the image path to show the selected image is

<img src="', $settings['default_images_url'], '/ladders_images/mainsTR/' . $row['m1mainp1'] . '.png" width="25%" />

My coding is pathetic, lol, so this may look crazy :D

But this is the code for one of the drop down selections.

<td width="15%" valign="top"><strong>' . $txt['match_one'] . '</strong></td>
<td>
  <select size="1" name="m1mainp1">
  <option value="0" selected="selected">Select Character</option>
  <option value="37">' . $txt['bowser_main'] . '</option>
  <option value="1">' . $txt['captain_falcon_main'] . '</option>
  <option value="2">' . $txt['diddy_kong_main'] . '</option>
  <option value="3">' . $txt['donkey_kong_main'] . '</option>
  <option value="4">' . $txt['falco_main'] . '</option>
  <option value="5">' . $txt['fox_main'] . '</option>
  <option value="6">' . $txt['ganondorf_main'] . '</option>
  <option value="7">' . $txt['ice_climbers_main'] . '</option>
  <option value="8">' . $txt['ike_main'] . '</option>
  <option value="9">' . $txt['jigglypuff_main'] . '</option>
  <option value="10">' . $txt['king_dedede_main'] . '</option>
  <option value="11">' . $txt['kirby_main'] . '</option>
  <option value="12">' . $txt['link_main'] . '</option>
  <option value="13">' . $txt['lucario_main'] . '</option>
  <option value="14">' . $txt['lucas_main'] . '</option>
  <option value="15">' . $txt['luigi_main'] . '</option>
  <option value="16">' . $txt['mario_main'] . '</option>
  <option value="17">' . $txt['marth_main'] . '</option>
  <option value="19">' . $txt['mr_game_and_watch_main'] . '</option>
  <option value="20">' . $txt['ness_main'] . '</option>
  <option value="21">' . $txt['olimar_main'] . '</option>
  <option value="22">' . $txt['peach_main'] . '</option>
  <option value="23">' . $txt['pikachu_main'] . '</option>
  <option value="24">' . $txt['pit_main'] . '</option>
  <option value="25">' . $txt['pokemon_trainer_main'] . '</option>
  <option value="26">' . $txt['r_o_b_main'] . '</option>
  <option value="27">' . $txt['samus_main'] . '</option>
  <option value="28">' . $txt['sheik_main'] . '</option>
  <option value="29">' . $txt['snake_main'] . '</option>
  <option value="30">' . $txt['sonic_main'] . '</option>
  <option value="31">' . $txt['toon_link_main'] . '</option>
  <option value="32">' . $txt['wario_main'] . '</option>
  <option value="33">' . $txt['wolf_main'] . '</option>
  <option value="34">' . $txt['yoshi_main'] . '</option>
  <option value="35">' . $txt['zelda_main'] . '</option>
  <option value="36">' . $txt['zero_suit_samus_main'] . '</option>
  </select>
</td>


any help on how to add previews for these images, like other MODs do would be great.


Ecru

Wouldn't everyone would know what their main character would look like? :P

hcfwesker

Thats one drop down, there's 6 in all just with characters.  This isn't just one thing they can select and go back.  It's for reporting Ladder Match results, which cant be corrected once submitted.  And with the mistakes made, some visual aid may help members with this.


Ecru

Sure, it's rather easy to show a preview but to be entirely honest, just the dropdown of it itself looks better in my opinion. It looks very clean cut. It looks similar to a script I made the other day that submits match results.

Anyways, regarding the image previewing-- have you looked at Profile.template.php by any chance? Image previewing is done on avatar selection. You could look at how that is done and attempt to "port" it over to your script.

hcfwesker

I looked at several MODs that do this, like in the Shop Admin menu; but trying to duplicate how it works got no results.

hcfwesker


hcfwesker

Anyone have any clear direction ....  please :(


emanuele

What do you have in $row['m1mainp1']?

@The Wizard, I still have to check your topic, sorry...


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

MrPhil

If I understand you correctly, you'd like for members to see the different images corresponding to the selection list entries as they mouse over them? I don't think you can put an image in the selection list itself, but I would think you could reserve a space outside the selection list to show an image (just above the selection box? If the selection list ever covers it, you'd have to put it elsewhere.):
<img name="selection_image" src="', $settings['default_images_url'], '/ladders_images/mainsTR/please_select.png" width="25%" />

I haven't tried this, but I would think you could add "onmouseover" events to each <option> tag, something like
<option value="1" onmouseover="swap_image(1);">' . $txt['captain_falcon_main'] . '</option>

where the Javascript function swap_image(num) would change the "src" (imageSource value or something like that -- my JS is a bit rusty) to the desired image:
getElementById('selection_image').imageSrc = $settings['default_images_url'] .  '/ladders_images/mainsTR/' . num . '.png';

If you don't want the last selection they were in to remain in the image display, you could add to each <option>
onmouseout="swap_image(0);"

to reset the image.

As I said, I haven't tried this myself, but with some experimentation and trial-and-error, I would think it could be done.

Last minute thought: If CSS will let you put background images in each <option>, you might be able to do that instead. If the list is somewhat dynamic, you might want to use
<option style="background-url: url(......);" ...

Anyway, that might be better to pursue first, as it would probably be easier to implement. You could pad the left side of each option's text so that it doesn't cover the image, or perhaps use the padding-left attribute in CSS.

hcfwesker

#10
Quote from: emanuele on September 22, 2012, 06:16:21 PM
What do you have in $row['m1mainp1']?

That depends on what the member selects.  m1mainp1 ( match 1 main player 1)  , the selection option number gets added to m1mainp1, depending what they select.  The character image list is numbered, 1-37 , depending what option they select will display that image for that character.

<option value="37">' . $txt['bowser_main'] . '</option>

$row['m1mainp1'] is 37 that a member selcts , then this image will appear on their stats. 

http://www.brawldomain.com/Themes/default/images/ladders_images/mainsTR/37.png


Quote from: MrPhil on September 22, 2012, 06:59:51 PM
If I understand you correctly, you'd like for members to see the different images corresponding to the selection list entries as they mouse over them? I don't think you can put an image in the selection list itself, but I would think you could reserve a space outside the selection list to show an image (just above the selection box? If the selection list ever covers it, you'd have to put it elsewhere.):

Actually, I want the preview to appear once they select a name from the drop down box, and changes if they change their selection before submitting.  But I'm gonna check out your suggestions

Kinda like this preview image




the End result is this, where game details appear on a player's stats for Ladders.  ( No issues with this, just showing what this is for)




There's just issues with members messing up reports because there are quiet a few fields to select, and if they make a mistake they have to resend, or I have to go and edit the databse for that Ladder report, which is time consuming :(

So, hoping having image previews of their selections BEFORE they send the report will help.


Thanx for the responses so far :)



emanuele

Quote from: hcfwesker on September 22, 2012, 09:50:01 PM
So, hoping having image previews of their selections BEFORE they send the report will help.
That is the javascript part that MrPhil posted. ;)


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

hcfwesker

My coding attempts is mostly through 1000's attempts of trial and errors :D  How would I apply the javascript part into the code.  I get the image ones, with the mouseover, but the ...

getElementById('selection_image').imageSrc = $settings['default_images_url'] .  '/ladders_images/mainsTR/' . num . '.png';

I have no clue where that would go

MrPhil

Quote from: hcfwesker on September 23, 2012, 04:39:09 PM
My coding attempts is mostly through 1000's attempts of trial and errors :D
That's no way to proceed. You need to pick up some books on HTML, Javascript, and PHP; and understand how it works (hint: examine the SMF source). You're wasting your time (and our time too) by trial and error programming (I hope you're wildly exaggerating, for humor).

QuoteHow would I apply the javascript part into the code.
You would find the template for the page in question, and define a Javascript function in the <head> section, within <script type="text/javascript">...</script> tags. What I gave you was just a small fragment of the total job -- you will need to make it part of a proper function, and do some research to find what the image tag source would be in Javascript (to assign a new src to the image tag).

Advertisement: