image swap problem
-
I’m having a problem with the way the default image is showing up on this test page http://flyfins.org/test/
Usually i don’t get this double image. Can someone tell me what is wrong with the code?The blog I need help with is: (visible only to logged in users)
-
Hi there, I’m seeing this is marked as resolved and I’m not seeing a double image on the page you referenced. Did you get this sorted out? I just want to make sure.
-
I got it to work, in the widget on the homepage and then tried to use the very same text in a post and WordPress seems to be taking the ahref tags out when I use it in the post. I used all the same CDs/tags last spring never had this problem. I finally took all the css out of the post and submitted it, but post does not show up on homepage, though I can see the post from ” view post’. Also did not send to blog distribution.
-
Can you post the code you are trying to use here in the forum between code tags like this, so that we can take a look at it?
<code>your code here </code> -
<table width="50%" align="center" bgcolor="#000000" style="width:100%;padding:10px;border:none;">
<tbody>
<tr>
<td colspan="3" align="left" valign="top" bgcolor="#000000" style="padding:4px;background-color:#000000;border:none;vertical-align:top;text-align:left;"><span style="color:#F9F2A8;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;">EVENT REGISTRATION</span></td>
</tr>
<tr>
<td width="9%" align="left" valign="top" bgcolor="#4e5160" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;"> DATE</span></td>
<td width="23%" align="left" valign="top" bgcolor="#4e5160" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;">EVENT</span></td>
<td width="68%" align="left" valign="top" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"></td>
</tr>
<tr>
<td rowspan="2" align="left" valign="top" bgcolor="#525863" style="padding:4px;background-color:#656363;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;">Sun 10/11</span></td>
<td align="left" valign="top" style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;"> Water Rats 8/Under Meet
<strong style="font-size:7pt;line-height:100%;">
8/Under
(Westport)</span></td>
<td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" rowspan="2" align="left" valign="top">
<div id="chads-image-swap-1"><img id="swap-1" src="https://fairfieldflyfins.files.wordpress.com/2015/05/reg-button3.jpg" alt="" width="91" height="39" /></div>
<span style="font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;">
<strong style="font-size:8pt;line-height:100%;">NEW</span></td>
</tr>
<tr>
<td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top" height="21"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;">Last to Reg:</span>
<strong style="color:#800000;font-family:Verdana, sans-serif;font-size:7pt;line-height:100%;">Mon 9/28/15</td>
</tr>
<tr>
<td rowspan="2" align="left" valign="top" bgcolor="#525863" style="padding:4px;background-color:#656363;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;">Sat 10/24 - Sun 10/25</span></td>
<td height="47" align="left" valign="top" style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">Wesleyan IMX Cup
JR/AGE/SR
</span>
<span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">(Middletown)</span></td>
<td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" rowspan="2" align="left" valign="top"><div id="chads-image-swap-1"><img id="swap-1" src="https://fairfieldflyfins.files.wordpress.com/2015/05/reg-button3.jpg" alt="" width="91" height="39" /></div><span style="font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;">
NEW
</span></td>
</tr>
<tr>
<td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top" height="21"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;">Last to Reg:</span> <strong style="color:#800000;font-family:Verdana, sans-serif;font-size:7pt;line-height:100%;">Wed 9/30/15</td>
</tr></tbody>
</table> -
Hi, did you perhaps copy and paste this into a Rich Text editor? The reason I ask is that I’m seeing a lot of
<br />
in the code. All of those have to be removed. I would copy/paste this into a plain text editor and save it as plain text. You can do that in TextEdit. The take out all the break tags I referenced above and try thing again. -
I’m also seeing a couple of div tags. divs are top level HTML tags. They should not be used inside of tables, and especially not within link code. I would remove those. If you need to add an inline style, add it to the “a” element, or if it applies to only the image, then between the img and src in the image section of the code.
-
-
-
I tried to see if it was the
, but the original code does not have those tags (even when i tried find/replace)? The div tag is part of the CSS image swap code, so i don’t know if i can take that out? Also, it still doesn’t explain why the exact same code works on my homepage (www.flyfins.org) on the righthand side of the page in a widget called “Event Registration”. When i copy/paste this same code into a blog post and preview it, the links don’t work and the image swap doesn’t work? I was able to have this work all last spring in the widget and posts.<table width="50%" align="center" bgcolor="#000000" style="width:100%;padding:10px;border:none;"> <tbody> <tr> <td colspan="3" align="left" valign="top" bgcolor="#000000" style="padding:4px;background-color:#000000;border:none;vertical-align:top;text-align:left;"><span style="color:#F9F2A8;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;"><strong>If you would like your swimmer to participate in either of the events below we will need registration completed by this Friday.</strong></span></td> </tr> <tr> <td width="9%" align="left" valign="top" bgcolor="#4e5160" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;"> <strong>DATE</strong></span></td> <td width="23%" align="left" valign="top" bgcolor="#4e5160" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;"><strong>EVENT</strong></span></td> <td width="68%" align="left" valign="top" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"></td> </tr> <tr> <td rowspan="2" align="left" valign="top" bgcolor="#525863" style="padding:4px;background-color:#656363;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;">Sat 10/17</span></td> <td align="left" valign="top" style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;"> Southington Tri-Meet <strong style="font-size:7pt;line-height:100%;"><br> All Groups</strong> (Southington)</span></td> <td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" rowspan="2" align="left" valign="top"><a href="http://flyfins.org/southington-tri-meet-saturday-october-17-2015/"> <div id="chads-image-swap-1"><img id="swap-1" src="https://fairfieldflyfins.files.wordpress.com/2015/05/reg-button3.jpg" alt="" width="91" height="39" /></div></a> <span style="font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong> </strong><strong style="font-size:8pt;line-height:100%;">NEW</strong></span></td> </tr> <tr> <td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong>Last to Reg:</strong></span> <strong style="color:#800000;font-family:Verdana, sans-serif;font-size:7pt;line-height:100%;">Fri 10/9</strong></td> </tr> <tr> <td rowspan="2" align="left" valign="top" bgcolor="#525863" style="padding:4px;background-color:#656363;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;">Sat-Sun<br> 11/7-8</span></td> <td align="left" valign="top" style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">Freestyle Frenzy<br> <strong>JR/AGE/SR</strong> </span> <span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">(Westport)</span></td> <td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" rowspan="2" align="left" valign="top"><a href="http://flyfins.org/2015-maura-marden-freestyle-frenzy-nov-7th-8th/"><div id="chads-image-swap-1"><img id="swap-1" src="https://fairfieldflyfins.files.wordpress.com/2015/05/reg-button3.jpg" alt="" width="91" height="39" /></div></a><span style="font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong> NEW </strong></span></td> </tr> <tr> <td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong>Last to Reg:</strong></span> <strong style="color:#800000;font-family:Verdana, sans-serif;font-size:7pt;line-height:100%;">Fri 10/9</strong></td> </tr> </tbody> </table> -
I’m seeing your button rollover effect working both in the Event Registration sidebar widget here:
https://fairfieldflyfins.wordpress.com/
As well as on your test page here:
I’m not seeing any duplicate images anywhere.
Could you confirm whether you still see an issue with this, and clarify exactly what the problem is? Thanks.
As a side note, would you consider using simple CSS for your buttons instead of images that need to be swapped? It’s a simpler method.
Tutorial: http://tutorials.jenkov.com/css/links.html#styling-links-as-buttons
Generator: http://cssgradientbutton.com/ -
i did resolve…but i appreciate your suggestion and links to tutorials…i will try these…thank you!
-
When i generate the code for these buttons using css…do i need to put any of this code in the CSS customize CSS editor section of my upgraded wordpress.com site…or is all of this code going in my html page or post…some of it in the <head> tags and the in the body tags?
Below is a sample of the generated code:<!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border-color:#8E6AF5;border-width: 1px 1px 1px 15px;border-style: solid; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; background-color: #45484d; background-image: -webkit-gradient(linear, left top, left bottom, from(#45484d), to(#000000)); background-image: -webkit-linear-gradient(top, #45484d, #000000); background-image: -moz-linear-gradient(top, #45484d, #000000); background-image: -ms-linear-gradient(top, #45484d, #000000); background-image: -o-linear-gradient(top, #45484d, #000000); background-image: linear-gradient(to bottom, #45484d, #000000);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#45484d, endColorstr=#000000); } .button_example:hover{ border-top-color: #8E6AF5;border-right-color: #8E6AF5;border-bottom-color: #8E6AF5;border-left-color: #8E6AF5;border-width: 1px 15px 1px 1px;border-style: solid; background-color: #2d2f32; background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2f32), to(#1a1a1a)); background-image: -webkit-linear-gradient(top, #2d2f32, #1a1a1a); background-image: -moz-linear-gradient(top, #2d2f32, #1a1a1a); background-image: -ms-linear-gradient(top, #2d2f32, #1a1a1a); background-image: -o-linear-gradient(top, #2d2f32, #1a1a1a); background-image: linear-gradient(to bottom, #2d2f32, #1a1a1a);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2d2f32, endColorstr=#1a1a1a); } </style></head><a class="button_example" href="#">PREVIEW BUTTON</a> -
Yes, you’d put only the CSS parts in the CSS Editor:
.button_example{ border-color:#8E6AF5;border-width: 1px 1px 1px 15px;border-style: solid; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; background-color: #45484d; background-image: -webkit-gradient(linear, left top, left bottom, from(#45484d), to(#000000)); background-image: -webkit-linear-gradient(top, #45484d, #000000); background-image: -moz-linear-gradient(top, #45484d, #000000); background-image: -ms-linear-gradient(top, #45484d, #000000); background-image: -o-linear-gradient(top, #45484d, #000000); background-image: linear-gradient(to bottom, #45484d, #000000);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#45484d, endColorstr=#000000); } .button_example:hover{ border-top-color: #8E6AF5;border-right-color: #8E6AF5;border-bottom-color: #8E6AF5;border-left-color: #8E6AF5;border-width: 1px 15px 1px 1px;border-style: solid; background-color: #2d2f32; background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2f32), to(#1a1a1a)); background-image: -webkit-linear-gradient(top, #2d2f32, #1a1a1a); background-image: -moz-linear-gradient(top, #2d2f32, #1a1a1a); background-image: -ms-linear-gradient(top, #2d2f32, #1a1a1a); background-image: -o-linear-gradient(top, #2d2f32, #1a1a1a); background-image: linear-gradient(to bottom, #2d2f32, #1a1a1a);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2d2f32, endColorstr=#1a1a1a); }And put the button code in your post editor in HTML view:
<a class="button_example" href="#">PREVIEW BUTTON</a>The rest of the bits (body, html, style, head tags, etc.) you can ignore.
-
-
- The topic ‘image swap problem’ is closed to new replies.
WordPress.com Forums 