Bump

Bump, any help please

bump

This is a code i use on my website, but its HTML... You need to make some changes to work in CSS, but you can get an idea... Basically, you need 2 images, not one... and should be definitely a transparent PNG images, NOT JPG!!!

Code:

<td> <a href="http://xdirect12345contactus.yolasite.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','http://yoursite/yoursecondimage.jpg',1)"><img src="http://img710.imageshack.us/img710/6943/0vpqvy1324418550.jpg" name="Image2" width="110" height="50" border="0" id="Image2" /></a></td>

I hope that this helps you a little

Hi,

If I'm getting it right, this code would work for you...

Code:

$(function(){

$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"><img hspace="0" border="0" title="Contact Us" alt="Contact Us" src="http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png" /></a>');

$('a.contactuslink').mouseenter(function(){
$(this).children('img').attr('src' , 'http://images-4.findicons.com/files/icons/1014/ivista/48/padlock.png');
});

$('a.contactuslink').mouseleave(function(){
$(this).children('img').attr('src' , 'http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png');
});

});

You don't need to add anything from ACP > Headers & Navigation. Just add the above code via ACP > Modules > JS code management. Add it for all pages and see if it works.

Hope that helps

EDIT:

And oh! If the code works, give me URLs of both normal and hover images so I'll add them in the code and make it complete.

I'll run some tests. Will this work without effecting other skins navigations that i created?

Yes, it should work on other skins as well.

I plan on creating multiple skins. I dont want to have the same "contact us" color or image for all skins, is there a way to create different colors or images on each different skin that I create?

Example: A different contact us button for a different skin that I choose for multiple skins.

Theme 1


Theme 2


Theme 3


Theme 4


There are 4 different buttons for 4 different themes. When a user selects "Theme 1" the button is Yellow. Then the user selects "Theme 3", the button is not yellow anymore but is green. Is there anyway to achieve this effect with css or javascript?

It is certainly possible but I need to know what method you use to change skins.

I plan on using this:
/t71484-add-multi-themes-to-your-forum

Can you provide me the code so I can put it in

I don't have any copy-paste codes for this right now. You can try adding background image with CSS for all different themes you use, this way you can apply different image for the contact-us link.

The above code will change to this...

Code:

$(function(){
$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"> </a>');       
});

You can apply background to class .contactuslink.

ok, so can you give me example codes for normal and hover for the .contactuslink. I could figure where to put the images and stuff.

To add images you can use this CSS code...

Code:

.contactuslink {
display: inline-block;
width: 172px; height: 42px;
background: url(URL OF IMAGE AS PER THEME) no-repeat;
}

Add this code in the CSS of different themes you are using. Just don't forget to change the image URL in the code.

This code:

Code:


$(function(){

$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"><img hspace="0" border="0" title="Contact Us" alt="Contact Us" src="http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png" /></a>');

$('a.contactuslink').mouseenter(function(){
$(this).children('img').attr('src' , 'http://images-4.findicons.com/files/icons/1014/ivista/48/padlock.png');
});

$('a.contactuslink').mouseleave(function(){
$(this).children('img').attr('src' , 'http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png');
});

});


Is an extremely horrible way of doing this. Not to mention inefficient and longer than it needs to be.
Also if your manually inserting a new navbar link with jQuery, why give it a class name and access it childNodes? Why not just give said image an ID and it can be accessed instantly. And also why not include the mouse over events in the HTML string.

Instead of using all that jQuery rubbish just use
onmouseover="this.src='new source';"


Besides what's wrong with using CSS Sprites?

LGforum, I revised my code and posted new code here : /t103797-navigation-problem-challenge#680028

Also, it doesn't make any considerable difference whether we apply a class name or directly apply ID to the image. While providing quick support, we have to skip some small things like that to save time and solve problems quickly.

The member wants different image for different themes thats why we have to add background image via CSS. And I know about CSS sprites but probably the thread author does not, thats why I didn't suggest to use them

ankillien wrote:Also, it doesn't make any considerable difference whether we apply a class name or directly apply ID to the image.

On the contrary, it does.
ID's can be access much quicker, especially when using jQuery. Any browsers which don't support the native getElementsByClassName will require looping through all tagNames within the context element, and there are still plenty of browsers not supporting getElementsByClassName.
Not too mention using jQuery to work through the nodes to reach the image from the link. Thats just extra unneeded work (especially with jQuery) when the image can be accessed in one fell swoop with an ID. And also the ':last' selector requires jQuery to find all the elements with such className and choose the last one. Where as it can be access much quicker using native javascript.

I'd recommend changing this:

Code:


$(function(){
$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"> </a>');     
});


to this:

Code:


$(function(){
document.getElementById('page-header').getElementsByTagName('ul')[0].innerHTML+='<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"> </a>';     
});


And the code in my last post can be altered to just this:

Code:


$(function(){
document.getElementById('page-header').getElementsByTagName('ul')[0].innerHTML+='<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu"><img title="Contact Us" alt="Contact Us" src="http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png" onmouseover="this.src= 'http://images-4.findicons.com/files/icons/1014/ivista/48/padlock.png';" onmouseout="this.src='http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png';"/></a>';     
});


The mouseover and mouseout functions are just included in the HTML.

Nice post, mate. But the latest browsers are smart and fast and they will do any calculations pretty quickly. I cannot spend my time thinking for the quickest possible solution to a problem, because it is just waste of time.

Your codes won't make the page load considerably faster. The difference would be minimal and won't even be noticeable. So, I'd choose to avoid wasting time and quickly provide codes that 'work fine'.

Now please avoid judging our codes and lets concentrate on helping members without wasting time finding 'better' solutions.

Thanks

Time optimising is never time wasted
And believe me, I didn't waste any time thinking of that code.

I'm not judging your codes, I'm offering improvements for educational purposes.
Something that greatly helped me learn what I know nowadays.

On forumotions shaky boards and system script it's becoming quite necessary.

Anyway to conclude, I hope somebody learnt something from my post above.
jQuery isn't often the best route.
There is a post on DionDesigns that explains why perfectly. I think I'll edit the link into this post later when I get the chance.

I don't really care what DionDesign has to say about jQuery! All I know is that jQuery is perfect and quick and handy solutions for those who don't want to 'waste' their time learning hundreds of properties and methods of native javascript and knowing how quickly they work!

Now no more discussion on this please!

ankillien wrote:To add images you can use this CSS code...

Code:

.contactuslink {
display: inline-block;
width: 172px; height: 42px;
background: url(URL OF IMAGE AS PER THEME) no-repeat;
}

Add this code in the CSS of different themes you are using. Just don't forget to change the image URL in the code.

I'll go with this one for now